今天用ajaxFileUpload做了一个上传文件到服务器的功能。

出现问题:先上传了一次,后来发现读取完成以后,再上传的时候前台调试file和自动义参数都传进,但后台获取的仍然是上一次上传时的相关参数,必须要刷新页面才可以再次上传。

原因:上查资料明确问题应该是ajaxFileUpload.js插件问题所致。

网上解决办法:在ajaxFileUpload.js源码中找到:createUploadForm 找到这一段

  1. <pre name="code" class="javascript">var oldElement = $('#' + fileElementId);
  2. var newElement = $(oldElement).clone();
  3. $(oldElement).attr('id', fileId);
  4. $(oldElement).before(newElement);
  5. $(oldElement).appendTo(form);

改为:

  1. var oldElement = $('#' + fileElementId);
  2. var newElement = $(oldElement).clone(true);
  3. //需要复制元素的所有事件处理。
  4. $(oldElement).attr('id', fileId);
  5. $(oldElement).before(newElement);
  6. $(oldElement).appendTo(form);

然而处理后并没有用,仔细分析ajaxFileUpload.js源码后,是由于第一次上传插入一个id="fireUploadForm"+id的表单到body中,第二次上传时这个form表单仍然存在,通过form的Id去拿form时是上一次上传时的表单。

  1. //(此段为ajaxFileUpload.js源码)
  2. var form = jQuery('#' + formId); //这里拿到的还是上一次上传数据时的表单
  3. jQuery(form).attr('action', s.url);
  4. jQuery(form).attr('method', 'POST');
  5. jQuery(form).attr('target', frameId);

打印输出:

  1. //此段为自己的js var name=$("#name option:selected").text();
  2. var type=$("input[name='type']:checked").val();
  3. var formId = 'jUploadForm' + 'file';  //file为input的id
  4. var test1 = jQuery('#'+formId);
  5. console.log("1:"+test1.prop("outerHTML"));//打印输出
  6. $.ajaxFileUpload(...);

第一次上传:

  1. 1:undefined

第二次上传:

  1. 1:<form action="importData" method="POST" name="jUploadFormfile" id="jUploadFormfile"
  2. enctype="multipart/form-data" target="jUploadFramefile" style="position: absolute; top: -1200px; left: -1200px;"><input type="file" name="file" id="jUploadFilefile"><input type="hidden" name="projectName" value="AutoTestingTool"><input type="hidden" name="importType" value="1"></form>

解决办法:

  1. var name=$("#name option:selected").text();
  2. var type=$("input[name='type']:checked").val();
  3. var formId = 'jUploadForm' + 'file';  //file为input的id
  4. var test1 = jQuery('#'+formId);
  5. if(test1.length>0){
  6. test1.remove();
  7. } //如果存在id = formId的表单,先进行删除,处理掉上一次上传遗留的form</span></span><span
  8. $.ajaxFileUpload(
  9. {
  10. url: 'importData',//用于文件上传的服务器端请求地址,url传参?name='+name+'&&type='+type+''
  11. secureuri: false, //是否需要安全协议,一般设置为false
  12. fileElementId: 'file', //文件上传域的ID
  13. dataType: 'json', //返回值类型 一般设置为json
  14. data:{"name":name,"type":type} //传参存在问题,可改url传参
  15. }
  16. );

关于ajaxFileUpload只能上传一次的解决的更多相关文章

  1. ajaxFileUpload只能上传一次,和上传同名图片不能上传等bug问题

    createUploadForm: function (id, fileElementId) { //create form var formId = 'jUploadForm' + id; var ...

  2. vue用阿里云oss上传图片使用分片上传只能上传100kb以内的解决办法

    首先,vue和阿里云oss上传图片结合参考了 这位朋友的 https://www.jianshu.com/p/645f63745abd 文章,成功的解决了我用阿里云oss上传图片前的一头雾水. 该大神 ...

  3. ajaxFileUpload onchang上传文件插件第二次失效刷新一次才能再次调用触发change事件

    关于用ajaxfileupload时,遇到一个要刷新一次页面才能再次上传, ajaxFileUpload 用onchang上传只能上传一次 第二次就失效了 我找这个问题找了很长时间 ajaxFileU ...

  4. spring mvc ajaxfileupload文件上传返回json下载问题

    问题:使用spring mvc ajaxfileupload 文件上传在ie8下会提示json下载问题 解决方案如下: 服务器代码: @RequestMapping(value = "/ad ...

  5. struts2 jquery ajaxFileUpload 异步上传文件

    网上搜集的,整理一下. 一.ajaxFileUpload 实现异步上传文件利用到了ajaxFileUpload.js这个文件,这是别人开发的一个jquery的插件,可以实现文件的上传并能够和strut ...

  6. 【转】JQuery插件ajaxFileUpload 异步上传文件(PHP版)

    前几天想在手机端做个异步上传图片的功能,平时用的比较多的JQuery图片上传插件是Uploadify这个插件,效果很不错,但是由于手机不支持flash,所以不得不再找一个文件上传插件来用了.后来发现a ...

  7. #添加图片,最多只能上传9张.md

    #添加图片,最多只能上传9张.md 前端页面: ```javascript <form id="imgForm" enctype="multipart/form-d ...

  8. MVC+AjaxFileUpload文件上传

    来源:微信公众号CodeL 本次给大家分享的是ajaxfileupload文件上传插件,百度一大堆功能超炫的文件上传插件,为什么我们会选择这个插件呢? 原因是在此之前,我们尝试使用过很多基于flash ...

  9. vsftpd匿名用户只能上传不能下载

    目的 搭建一台FTP服务器,供学生上传作业使用. 要求 1.学生可以直接访问FTP服务器,无需登录: 2.只能上传文件,不能创建文件夹.重命名.删除等: 3.不能下载文件(防抄袭): 4.不能在线查看 ...

随机推荐

  1. Redis入门教程(C#)

    Redis是什么? Redis是一个开源的.使用C语言编写的.支持网络交互的.可基于内存也可持久化的Key-Value数据库. 补充概念: 持久化:是将程序数据在持久状态和瞬时状态间转换的机制.通俗的 ...

  2. 利用ligerUI隐藏某列,并不产生空白列的方法

    var grid;//声明变量 $(function () { //grid初始化 grid = $("#maingrid4").ligerGrid({ columns: [ { ...

  3. ORM-Dapper快速学习

    轻量级ORM框架——第一篇:Dapper快速学习 转载地址:http://www.cnblogs.com/huangxincheng/p/5828470.html  我们都知道ORM全称叫做Objec ...

  4. Day 6 编码的进阶

     https://blog.csdn.net/Deft_MKJing/article/details/79460485 a.ascii码:8位表示一个字符,共可以表示2**8个(即256)字符 ,   ...

  5. Exp6 信息搜集与漏洞扫描 20164323段钊阳

    20164323 Exp6 信息搜集与漏洞扫描 回答问题 1.哪些组织负责DNS,IP的管理. 全球根服务器均由美国政府授权的ICANN统一管理,负责全球的域名根服务器.DNS和IP地址管理.全球一共 ...

  6. BZOJ3775: 点和直线(计算几何+拉格朗日乘数法)

    题面 传送门 题解 劲啊-- 没有和\(Claris\)一样推,用了类似于\(Shinbokuow\)推已知点求最短直线的方法,结果\(WA\)了好几个小时,拿\(Claris\)代码拍了几个小时都没 ...

  7. jzoj5879. 【NOIP2018提高组模拟9.22】电路图 B

    tj:一道好題 看區間操作可以想到線段樹 並聯操作公式:a1∗a2/(a1+a2)a1*a2/(a1+a2)a1∗a2/(a1+a2) 串聯操作公式:a1+a2a1+a2a1+a2 我們發現,一個區間 ...

  8. 实现一个算法,寻找字符串中出现次数最少的、并且首次出现位置最前的字符 如"cbaacfdeaebb",符合要求的是"f",因为他只出现了一次(次数最少)。并且比其他只出现一次的字符(如"d")首次出现的位置最靠前。

    实现一个算法,寻找字符串中出现次数最少的.并且首次出现位置最前的字符如"cbaacfdeaebb",符合要求的是"f",因为他只出现了一次(次数最少).并且比其 ...

  9. numpy的ravel()和flatten()函数比较

    功能 两个函数的功能都是将多维数组降为一维. 用法 import numpy as np arr = np.array([[1, 2],[3, 4]]) arr.flatten() arr.ravel ...

  10. 【xsy3423】党² 线段树+李超线段树or动态半平面交

    本来并不打算出原创题的,此题集CF542A和sk的灵感而成,算个半原创吧. 题目大意: 给定有$n$个元素的集合$P$,其中第$i$个元素中包含$L_i,R_i,V_i$三个值. 给定另一个有$n$个 ...