热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

文件上传+textarea提交的问题?

{代码...}{代码...}附件上传是ajax异步提交,然互生成超链接。{代码...}但是当textarea点击提交的时候,那么如何把超链接的内容也提交呢?如果是多个上传文件,如何把上传文件函数返回的值提交呢?应该怎么获...

    

      

上传文件:

    $("#duty_add").click(function(){
        var root = $("p#root").text();
        var vals = $.trim($("#content").val());
        if(vals != ''){
            $.ajax({
                type : "POST",
                url : root + "/duty/dutyadd",
                data :{'content':vals},
                success:function(data){
                    console.log(file_value);
                    $("#result").html(data);
                }
            });
        }else{
            alert('内容不能为空');
        }
        

    });

    
    $("#upload_file").change(function(){
         if($("#upload_file").val() != ''){
             var root = $("p#root").text(); //获取路径
             var root2 = $("p#root2").text(); //获取路径
            var formData = new FormData($("#uploadForm")[0]);
            $.ajax({
                  url: root + "/duty/fileup",
                  type: 'POST',
                  data: formData,
                  async: true,
                  cache: false,
                  contentType: false,
                  processData: false,
                  success: function (returndata) {
                      file_value[returndata.name] = returndata.url;
                  
                      
                      $("#uploadForm").prepend(''+ returndata.name + ''+"
"); } }); }; });

附件上传是ajax异步提交,然互生成超链接。

$("#uploadForm").prepend(''+ returndata.name + ''+"
");

但是当textarea点击提交的时候,那么如何把超链接的内容也提交呢?
如果是多个上传文件,如何把上传文件函数返回的值提交呢?应该怎么获取比较方便,是不是我思路是错的?
想了好久想不通如何处理这样的?
给个思路也行,我想试试

回复内容:


    

      

上传文件:

    $("#duty_add").click(function(){
        var root = $("p#root").text();
        var vals = $.trim($("#content").val());
        if(vals != ''){
            $.ajax({
                type : "POST",
                url : root + "/duty/dutyadd",
                data :{'content':vals},
                success:function(data){
                    console.log(file_value);
                    $("#result").html(data);
                }
            });
        }else{
            alert('内容不能为空');
        }
        

    });

    
    $("#upload_file").change(function(){
         if($("#upload_file").val() != ''){
             var root = $("p#root").text(); //获取路径
             var root2 = $("p#root2").text(); //获取路径
            var formData = new FormData($("#uploadForm")[0]);
            $.ajax({
                  url: root + "/duty/fileup",
                  type: 'POST',
                  data: formData,
                  async: true,
                  cache: false,
                  contentType: false,
                  processData: false,
                  success: function (returndata) {
                      file_value[returndata.name] = returndata.url;
                  
                      
                      $("#uploadForm").prepend(''+ returndata.name + ''+"
"); } }); }; });

附件上传是ajax异步提交,然互生成超链接。

$("#uploadForm").prepend(''+ returndata.name + ''+"
");

但是当textarea点击提交的时候,那么如何把超链接的内容也提交呢?
如果是多个上传文件,如何把上传文件函数返回的值提交呢?应该怎么获取比较方便,是不是我思路是错的?
想了好久想不通如何处理这样的?
给个思路也行,我想试试

你在文件上传的时候已经把上传后的结果保存在了 file_value 这个变量中,
那么在你提交 textarea 里的时候时, 在 data :{'content':vals}, 这个地方, 把 file_value 也传递给后台就可以了.
比如: data:{'content':vals, 'files':file_value},

你发的代码中, 没有 file_value 这个变量定义的地方, 所以此处假设你的这两个 ajax 在触发的时候,都可以访问到这个变量, 且是同一个.

如果是要提交的内容,自然是要放在input里面

推荐阅读
  • 本文介绍了使用AJAX的POST请求实现数据修改功能的方法。通过ajax-post技术,可以实现在输入某个id后,通过ajax技术调用post.jsp修改具有该id记录的姓名的值。文章还提到了AJAX的概念和作用,以及使用async参数和open()方法的注意事项。同时强调了不推荐使用async=false的情况,并解释了JavaScript等待服务器响应的机制。 ... [详细]
  • Java实战之电影在线观看系统的实现
    本文介绍了Java实战之电影在线观看系统的实现过程。首先对项目进行了简述,然后展示了系统的效果图。接着介绍了系统的核心代码,包括后台用户管理控制器、电影管理控制器和前台电影控制器。最后对项目的环境配置和使用的技术进行了说明,包括JSP、Spring、SpringMVC、MyBatis、html、css、JavaScript、JQuery、Ajax、layui和maven等。 ... [详细]
  • 本文介绍了一种处理AJAX操作授权过期的全局方式,以解决Asp.net MVC中Session过期异常的问题。同时还介绍了基于WebImage的图片上传工具类。详细内容请参考链接:https://www.cnblogs.com/starluck/p/8284949.html ... [详细]
  • 本文介绍了如何使用jQuery和AJAX来实现动态更新两个div的方法。通过调用PHP文件并返回JSON字符串,可以将不同的文本分别插入到两个div中,从而实现页面的动态更新。 ... [详细]
  • 从零基础到精通的前台学习路线
    随着互联网的发展,前台开发工程师成为市场上非常抢手的人才。本文介绍了从零基础到精通前台开发的学习路线,包括学习HTML、CSS、JavaScript等基础知识和常用工具的使用。通过循序渐进的学习,可以掌握前台开发的基本技能,并有能力找到一份月薪8000以上的工作。 ... [详细]
  • 本文介绍了Java后台Jsonp处理方法及其应用场景。首先解释了Jsonp是一个非官方的协议,它允许在服务器端通过Script tags返回至客户端,并通过javascript callback的形式实现跨域访问。然后介绍了JSON系统开发方法,它是一种面向数据结构的分析和设计方法,以活动为中心,将一连串的活动顺序组合成一个完整的工作进程。接着给出了一个客户端示例代码,使用了jQuery的ajax方法请求一个Jsonp数据。 ... [详细]
  • 本文介绍了DataTables插件的官方网站以及其基本特点和使用方法,包括分页处理、数据过滤、数据排序、数据类型检测、列宽度自动适应、CSS定制样式、隐藏列等功能。同时还介绍了其易用性、可扩展性和灵活性,以及国际化和动态创建表格的功能。此外,还提供了参数初始化和延迟加载的示例代码。 ... [详细]
  • Vue基础一、什么是Vue1.1概念Vue(读音vjuː,类似于view)是一套用于构建用户界面的渐进式JavaScript框架,与其它大型框架不 ... [详细]
  • 本文介绍了在开发Android新闻App时,搭建本地服务器的步骤。通过使用XAMPP软件,可以一键式搭建起开发环境,包括Apache、MySQL、PHP、PERL。在本地服务器上新建数据库和表,并设置相应的属性。最后,给出了创建new表的SQL语句。这个教程适合初学者参考。 ... [详细]
  • Nginx使用(server参数配置)
    本文介绍了Nginx的使用,重点讲解了server参数配置,包括端口号、主机名、根目录等内容。同时,还介绍了Nginx的反向代理功能。 ... [详细]
  • 基于layUI的图片上传前预览功能的2种实现方式
    本文介绍了基于layUI的图片上传前预览功能的两种实现方式:一种是使用blob+FileReader,另一种是使用layUI自带的参数。通过选择文件后点击文件名,在页面中间弹窗内预览图片。其中,layUI自带的参数实现了图片预览功能。该功能依赖于layUI的上传模块,并使用了blob和FileReader来读取本地文件并获取图像的base64编码。点击文件名时会执行See()函数。摘要长度为169字。 ... [详细]
  • 电销机器人作为一种人工智能技术载体,可以帮助企业提升电销效率并节省人工成本。然而,电销机器人市场缺乏统一的市场准入标准,产品品质良莠不齐。创业者在代理或购买电销机器人时应注意谨防用录音冒充真人语音通话以及宣传技术与实际效果不符的情况。选择电销机器人时需要考察公司资质和产品品质,尤其要关注语音识别率。 ... [详细]
  • 这是原文链接:sendingformdata许多情况下,我们使用表单发送数据到服务器。服务器处理数据并返回响应给用户。这看起来很简单,但是 ... [详细]
  • 如何去除Win7快捷方式的箭头
    本文介绍了如何去除Win7快捷方式的箭头的方法,通过生成一个透明的ico图标并将其命名为Empty.ico,将图标复制到windows目录下,并导入注册表,即可去除箭头。这样做可以改善默认快捷方式的外观,提升桌面整洁度。 ... [详细]
  • 本文讨论了如何在codeigniter中识别来自angularjs的请求,并提供了两种方法的代码示例。作者尝试了$this->input->is_ajax_request()和自定义函数is_ajax(),但都没有成功。最后,作者展示了一个ajax请求的示例代码。 ... [详细]
author-avatar
Jay_5
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有