关于ajaxFileUpload只能上传一次的解决
今天用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传参
- }
- );
关于ajaxFileUpload只能上传一次的解决的更多相关文章
- ajaxFileUpload只能上传一次,和上传同名图片不能上传等bug问题
createUploadForm: function (id, fileElementId) { //create form var formId = 'jUploadForm' + id; var ...
- vue用阿里云oss上传图片使用分片上传只能上传100kb以内的解决办法
首先,vue和阿里云oss上传图片结合参考了 这位朋友的 https://www.jianshu.com/p/645f63745abd 文章,成功的解决了我用阿里云oss上传图片前的一头雾水. 该大神 ...
- ajaxFileUpload onchang上传文件插件第二次失效刷新一次才能再次调用触发change事件
关于用ajaxfileupload时,遇到一个要刷新一次页面才能再次上传, ajaxFileUpload 用onchang上传只能上传一次 第二次就失效了 我找这个问题找了很长时间 ajaxFileU ...
- spring mvc ajaxfileupload文件上传返回json下载问题
问题:使用spring mvc ajaxfileupload 文件上传在ie8下会提示json下载问题 解决方案如下: 服务器代码: @RequestMapping(value = "/ad ...
- struts2 jquery ajaxFileUpload 异步上传文件
网上搜集的,整理一下. 一.ajaxFileUpload 实现异步上传文件利用到了ajaxFileUpload.js这个文件,这是别人开发的一个jquery的插件,可以实现文件的上传并能够和strut ...
- 【转】JQuery插件ajaxFileUpload 异步上传文件(PHP版)
前几天想在手机端做个异步上传图片的功能,平时用的比较多的JQuery图片上传插件是Uploadify这个插件,效果很不错,但是由于手机不支持flash,所以不得不再找一个文件上传插件来用了.后来发现a ...
- #添加图片,最多只能上传9张.md
#添加图片,最多只能上传9张.md 前端页面: ```javascript <form id="imgForm" enctype="multipart/form-d ...
- MVC+AjaxFileUpload文件上传
来源:微信公众号CodeL 本次给大家分享的是ajaxfileupload文件上传插件,百度一大堆功能超炫的文件上传插件,为什么我们会选择这个插件呢? 原因是在此之前,我们尝试使用过很多基于flash ...
- vsftpd匿名用户只能上传不能下载
目的 搭建一台FTP服务器,供学生上传作业使用. 要求 1.学生可以直接访问FTP服务器,无需登录: 2.只能上传文件,不能创建文件夹.重命名.删除等: 3.不能下载文件(防抄袭): 4.不能在线查看 ...
随机推荐
- 四两拨千斤式的攻击!如何应对Memcache服务器漏洞所带来的DDoS攻击?
本文由 网易云发布. 近日,媒体曝光Memcache服务器一个漏洞,犯罪分子可利用Memcache服务器通过非常少的计算资源发动超大规模的DDoS攻击.该漏洞是Memcache开发人员对UDP协议支 ...
- NPOI 导出excel 通用方法
public static byte[] ExportExcel<T>(Dictionary<string, string> columnsHeader, List<T& ...
- centos7 虚拟机中,网卡不启动的解决方式
使用NAT模式的虚拟centos, 只显示两个网卡,无法连接外网, 输入systemctl start network后报错信息" Restarting network (via syste ...
- 「BZOJ1095」[ZJOI2007] Hide 捉迷藏
题目描述 Jiajia和Wind是一对恩爱的夫妻,并且他们有很多孩子.某天,Jiajia.Wind和孩子们决定在家里玩捉迷藏游戏.他们的家很大且构造很奇特,由N个屋子和N-1条双向走廊组成,这N-1条 ...
- 队列的实现——java
同样实现方法有两种: 1. 数组的实现,可以存储任意类型的数据(略): 2. Java的 Collection集合 中自带的"队列"(LinkedList)的示例: import ...
- Java并发工具类之同步屏障CyclicBarrier
CyclicBarrier的字面意思是可以循环使用的Barrier,它要做的事情是让一个线程到达一个Barrier的时候被阻塞,直到最后一个线程到达Barrier,屏障才会放开,所有被Barrier拦 ...
- java的几种定时任务
本篇博文主要是讲述2.x 版本的quartz下的实现方案,1.x 版本的实现方式大致原理一致,但是具体的实现方式有些不一致,具体体现在获取 scheduler 这个类的方式上有些不同,这里不作过多的 ...
- angular.js的依赖注入解析
本教程使用AngularJS版本:1.5.3 angularjs GitHub: https://github.com/angular/angular.js/ Angula ...
- CentOS7搭建FastDFS V5.11分布式文件系统-第一篇
1.绪论 最近要用到fastDFS,所以自己研究了一下,在搭建FastDFS的过程中遇到过很多的问题,为了能帮忙到以后搭建FastDFS的同学,少走弯路,与大家分享一下.FastDFS的作者淘宝资深架 ...
- POJ 1131
#include <iostream> #include <string> using namespace std; ]; int main() { //freopen(&qu ...