ajaxFileUpload异步上传资源,onchange多次调用问题的解决方案
2014-08-07 15:30
826 查看
一、上传文件的做法
1 前端代码
upload js方法
2 界面
![](http://images.cnitblog.com/i/360215/201408/071525453504481.png)
3 执行结果
我们发现确实弹框了,但是弹了不只一次,这是什么原因呢?
![](http://images.cnitblog.com/i/360215/201408/071526149755831.png)
4 通过查看ajaxFileUpload源码,其做法个人总结如下。
i 创建一个from表单,表单的action是我们一开始调用ajaxFileUpload方法是传入的参数url
ii 通过jquery的clone方法,将原来的各种input复制到步骤1 创建的form表单下。
iii 将form表单append到一个iframe下
iv 通过form表单提交数据,发送同步请求去上传资源,但创建的iframe和我们的页面不在同一个层级,所以刷新了之后对我们的页面是不影响的。
我使用的Chrome的版本如下
![](http://images.cnitblog.com/i/360215/201408/071526493976513.png)
经过调试发现,出现这种弹框多次的原因是由于ajaxFileUpload插件的fileElementId造成的。
来看下源码
AjaxFileUpload.js
![](http://images.cnitblog.com/i/360215/201408/071527135069444.png)
![](http://images.cnitblog.com/i/360215/201408/071527347407832.png)
此时会调用到JQuery的clone方法,
![](http://images.cnitblog.com/i/360215/201408/071527503815543.png)
因此初步确定了是因为clone方法在复制节点的时候调用到了复制的input中的onchange方法或者是复制过来后副本的onchange方法。
在用低版本的Chrome测试了下,发现在clone方法,不会调用到onchange方法,版本如下
![](http://images.cnitblog.com/i/360215/201408/071528336003949.png)
最后,总结以下出现上传文件多次弹框的原因是:Chrome的版本升级后,对jquery的clone方法的解析执行跟以前不一样。
5 解决方案
记录之前的路径,然后每次获取当前路径先跟之前的做对比,不相等才发请求
1 前端代码
<input id="myfiles" name="myfiles" type="file" onchange="upload();"/> <input type="button" name="btn_abc" onclick="document.getElementById('myfiles').click();" style="xxxx" />
upload js方法
function upload() { alert("haha"); $.ajaxFileUpload({ url : "xxxx", secureuri : false, fileElementId : 'myfiles', dataType : 'JSON', data: { … }, success : function(data, status) { }, error : function(data, status, e) { …. } }); return false; };
2 界面
![](http://images.cnitblog.com/i/360215/201408/071525453504481.png)
3 执行结果
我们发现确实弹框了,但是弹了不只一次,这是什么原因呢?
![](http://images.cnitblog.com/i/360215/201408/071526149755831.png)
4 通过查看ajaxFileUpload源码,其做法个人总结如下。
i 创建一个from表单,表单的action是我们一开始调用ajaxFileUpload方法是传入的参数url
ii 通过jquery的clone方法,将原来的各种input复制到步骤1 创建的form表单下。
iii 将form表单append到一个iframe下
iv 通过form表单提交数据,发送同步请求去上传资源,但创建的iframe和我们的页面不在同一个层级,所以刷新了之后对我们的页面是不影响的。
我使用的Chrome的版本如下
![](http://images.cnitblog.com/i/360215/201408/071526493976513.png)
经过调试发现,出现这种弹框多次的原因是由于ajaxFileUpload插件的fileElementId造成的。
来看下源码
AjaxFileUpload.js
![](http://images.cnitblog.com/i/360215/201408/071527135069444.png)
![](http://images.cnitblog.com/i/360215/201408/071527347407832.png)
此时会调用到JQuery的clone方法,
![](http://images.cnitblog.com/i/360215/201408/071527503815543.png)
因此初步确定了是因为clone方法在复制节点的时候调用到了复制的input中的onchange方法或者是复制过来后副本的onchange方法。
在用低版本的Chrome测试了下,发现在clone方法,不会调用到onchange方法,版本如下
![](http://images.cnitblog.com/i/360215/201408/071528336003949.png)
最后,总结以下出现上传文件多次弹框的原因是:Chrome的版本升级后,对jquery的clone方法的解析执行跟以前不一样。
5 解决方案
记录之前的路径,然后每次获取当前路径先跟之前的做对比,不相等才发请求
var prePath = $('#myfiles').val(); function upload() { var curPath = $('#myfiles').val(); if (prePath == curPath) { return false; } prePath = curPath; $.ajaxFileUpload({ url : "xxxx", //submit to UploadFileServlet secureuri : false, fileElementId : 'myfiles', dataType : 'JSON', data: { }, success : function(data, status) { }, error : function(data, status, e) { } }); return false; };
相关文章推荐
- ajaxfileUpload.js 异步文件上传 onchange问题
- jQuery插件之ajaxFileUpload(异步上传图片并实时显示,并解决onchange后ajaxFileUpload失效问题)
- jQuery插件之ajaxFileUpload(异步上传图片并实时显示,并解决onchange后ajaxFileUpload失效问题)
- jQuery 文件上传插件ajaxFileUpload使用以及onchange问题
- 使用$.ajaxFileUpload上传时<input type="file">设置的onchange只能执行一次的解决方案
- spring mvc 下使用ajaxfileupload.js 异步上传文件 并返回信息 各种问题解决
- 解决网页异步上传图片时不断更换预览图片时数据库累积文件问题与ajaxUploadFile上传多个参数问题
- jQuery插件之ajaxFileUpload(异步上传图片并实时显示,并解决onchange后ajaxFileUpload失效问题)
- jQuery插件之ajaxFileUpload(异步上传图片并实时显示,并解决onchange后ajaxFileUpload失效问题)
- ajaxFileUpload上传问题,上传多次出现问题
- 异常-----springmvc + ajaxfileupload解决ajax不能异步上传图片的问题。java.lang.ClassCastException: org.apache.catalina.connector.RequestFacade cannot be cast to org.springframework.web.multipart.
- jQuery插件之ajaxFileUpload(异步上传图片并实时显示,并解决onchange后ajaxFileUpload失效问题)
- jquery之ajaxfileupload异步上传插件
- ajaxFileUpload 上传文件 以及 返回值 带 <pre> 标签问题
- jquery之ajaxfileupload异步上传插件
- AjaxFileUpload组件结合Struts2异步图片上传
- Struts2中的异步提交(ajaxfileupload异步上传(图片)插件的使用)
- asp.net结合ajaxfileupload控件上传文件一直提示undefined问题
- jquery ajaxfileupload文件上传类型问题
- Ajaxfileupload 上传文件后返回response的contentType错误问题