html input的file文件输入框onchange事件触发一次失效解决方法

最新推荐文章于 2022-06-07 10:45:27 发布

weixin_33943347

最新推荐文章于 2022-06-07 10:45:27 发布

阅读量877

点赞数

文章标签： javascript json ViewUI

最近在做一个图片上传的功能，出现提交一次后，file输入框的change事件无法再次触发的bug，就是说提交一次后必须刷新才能再次提交，这就坑了~

于是想办法解决它~

在网上找了一些资料，找到这几种方法：

1、替换掉原来的input框
2、remove原来的input框，然后在添加进新的一样的input框

我测试了之后发现可以用下面的方法解决这个问题：
第一步：上传完成后替换掉原来的input框
第二步：重新绑定onchange事件

问题解决！！

代码如下：

 1 <script>
 2         $(document).ready(function () {
 3             /* jquery handleError版本兼容 */
 4             jQuery.extend({
 5                 handleError: function (s, xhr, status, e) {
 6                     if (s.error) {
 7                         s.error.call(s.context || s, xhr, status, e);
 8                     }
 9                     if (s.global) {
10                         (s.context ? jQuery(s.context) : jQuery.event).trigger("ajaxError", [xhr, s, e]);
11                     }
12                 },
13                 httpData: function (xhr, type, s) {
14                     var ct = xhr.getResponseHeader("content-type"),
15                         xml = type == "xml" || !type && ct && ct.indexOf("xml") >= 0,
16                         data = xml ? xhr.responseXML : xhr.responseText;
17                     if (xml && data.documentElement.tagName == "parsererror")
18                         throw "parsererror";
19                     if (s && s.dataFilter)
20                         data = s.dataFilter(data, type);
21                     if (typeof data === "string") {
22                         if (type == "script")
23                             jQuery.globalEval(data);
24                         if (type == "json")
25                             data = window["eval"]("(" + data + ")");
26                     }
27                     return data;
28                 }
29             });
30 
31             /* file输入框变化时调用上传图片函数 */
32             $(".myFile").change(function(){
33                 var objId = $.trim($(this).attr('id'));
34                 myUpload(objId);
35             });
36             /* 上传函数 */
37             function myUpload(objId)
38             {
39                 var _obj = $('#'+objId);
40                 var objVal = $.trim(_obj.val());
41                 if(!objVal){
42                     alert('你还未选择图片！');
43                     return false;
44                 }
45                 $.ajaxFileUpload({
46                     type: "post",
47                     url: "upload.do",
48                     secureuri:false,
49                     fileElementId:objId,
50                     dataType: "json",
51                     success: function(result) {
52                         if (result.code == "1") {
53                             alert("上传文件成功！");
54                         }
55                     },
56                     complete: function(xmlHttpRequest) {
57                         _obj.replaceWith('<input type="file" class="myFile" id="'+objId+'" name="'+objId+'" style="display:none;"/>');
58                         $("#"+objId).on("change", function(){
59                             myUpload(objId);
60                         });
61                     },
62                     error: function(data, status, e) {
63                         alert("文件上传失败!");
64                     }
65                 });
66                 return false;
67             }
68         });
69     </script>

代码文本如下：

/* file输入框变化时调用上传图片函数 */
$(".myFile").change(function(){
var objId = $.trim($(this).attr('id'));
myUpload(objId);
});
/* 上传函数 */
function myUpload(objId)
{
var _obj = $('#'+objId);
var objVal = $.trim(_obj.val());
if(!objVal){
alert('你还未选择图片！');
return false;
}
$.ajaxFileUpload({
type: "post",
url: "upload.do",
secureuri:false,
fileElementId:objId,
dataType: "json",
success: function(result) {
if (result.code == "1") {
alert("上传文件成功！");
}
},
complete: function(xmlHttpRequest) {
_obj.replaceWith('<input type="file" class="myFile" id="'+objId+'" name="'+objId+'" style="display:none;"/>');
$("#"+objId).on("change", function(){
myUpload(objId);
});
},
error: function(data, status, e) {
alert("文件上传失败!");
}
});
return false;
}
});
</script>

done!