关于ajaxFileUpload只能上传一次的解决
2024-08-29 18:24:26
今天用ajaxFileUpload做了一个上传文件到服务器的功能。
出现问题:先上传了一次,后来发现读取完成以后,再上传的时候前台调试file和自动义参数都传进,但后台获取的仍然是上一次上传时的相关参数,必须要刷新页面才可以再次上传。
原因:上查资料明确问题应该是ajaxFileUpload.js插件问题所致。
网上解决办法:在ajaxFileUpload.js源码中找到:createUploadForm 找到这一段
- <pre name="code" class="javascript">var oldElement = $('#' + fileElementId);
- var newElement = $(oldElement).clone();
- $(oldElement).attr('id', fileId);
- $(oldElement).before(newElement);
- $(oldElement).appendTo(form);
改为:
- var oldElement = $('#' + fileElementId);
- var newElement = $(oldElement).clone(true);
- //需要复制元素的所有事件处理。
- $(oldElement).attr('id', fileId);
- $(oldElement).before(newElement);
- $(oldElement).appendTo(form);
然而处理后并没有用,仔细分析ajaxFileUpload.js源码后,是由于第一次上传插入一个id="fireUploadForm"+id的表单到body中,第二次上传时这个form表单仍然存在,通过form的Id去拿form时是上一次上传时的表单。
- //(此段为ajaxFileUpload.js源码)
- var form = jQuery('#' + formId); //这里拿到的还是上一次上传数据时的表单
- jQuery(form).attr('action', s.url);
- jQuery(form).attr('method', 'POST');
- jQuery(form).attr('target', frameId);
打印输出:
- //此段为自己的js var name=$("#name option:selected").text();
- var type=$("input[name='type']:checked").val();
- var formId = 'jUploadForm' + 'file'; //file为input的id
- var test1 = jQuery('#'+formId);
- console.log("1:"+test1.prop("outerHTML"));//打印输出
- $.ajaxFileUpload(...);
第一次上传:
- 1:undefined
第二次上传:
- 1:<form action="importData" method="POST" name="jUploadFormfile" id="jUploadFormfile"
- 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>
解决办法:
- var name=$("#name option:selected").text();
- var type=$("input[name='type']:checked").val();
- var formId = 'jUploadForm' + 'file'; //file为input的id
- var test1 = jQuery('#'+formId);
- if(test1.length>0){
- test1.remove();
- } //如果存在id = formId的表单,先进行删除,处理掉上一次上传遗留的form</span></span><span
- $.ajaxFileUpload(
- {
- url: 'importData',//用于文件上传的服务器端请求地址,url传参?name='+name+'&&type='+type+''
- secureuri: false, //是否需要安全协议,一般设置为false
- fileElementId: 'file', //文件上传域的ID
- dataType: 'json', //返回值类型 一般设置为json
- data:{"name":name,"type":type} //传参存在问题,可改url传参
- }
- );
最新文章
- Android 手机卫士--导航界面2
- 转载 - Vultr VPS注册开通且一键快速安装PPTP VPN和电脑连接使用
- JS 对象遍历
- 0505--鲜花售卖网之“NABCD模型”
- hdu 2048 神、上帝以及老天爷
- IIS 之 HTTP 错误 500.19(无法访问请求页面,因为该页的相关配置数据无效)
- IE6/IE7中li底部4px的Bug
- emoji处理方法汇总
- poj 1083 Moving Tables_dp
- mysql 执行计划走索引
- InjectAPC全部项目(Win32和Win64位)
- Javascript正则表达式(上)
- BZOJ-1010-[HNOI2008]玩具装箱toy(斜率优化)
- Centos系统下硬盘扩容
- 排序算法之low B三人组
- [CTSC 1999]拯救大兵瑞恩&;[网络流24题]孤岛营救问题
- 网站开发进阶(四十四)input type=";submit"; 和";button";的区别
- Android O广播接收情况
- Microsoft.AspNet.Web.Optimization.Bundle的完美替换方案
- python学习笔记(四)