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

概述最近在做一个图片上传的功能，出现提交一次后，file输入框的change事件无法再次触发的bug，就是说提交一次后必须刷新才能再次提交，这就坑了~ 于是想办法解决它~ 在网上找了一些资料，找到这几种方

最近在做一个图片上传的功能，出现提交一次后，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:  (s,xhr,status,e) { 6                     if (s.error) { 7                         s.error.call(s.context || s,e); 8                     } 9                      (s.global) {10                         (s.context ? jquery(s.context) : jquery.event).trigger("AJAXError,[xhr,s,e]);11 12                 },13                 httpData:  (xhr,type,s) {14                     var ct = xhr.getResponseheader(content-type),1)">15                         xml  type == xml" || !type && ct.indexOf() >= 016                         data  xml  xhr.responseXML : xhr.responseText;17                      (xml  data.documentElement.tagname parsererror)18                         throw ;19                      (s  s.dataFilter)20  s.dataFilter(data,type);21                      (typeof data === string) {22                          (type script23                             jquery.globalEval(data);24                         Json25                             data  window[eval]((++ ));26 27                     return data;28                 }29             });30 31              file输入框变化时调用上传图片函数 32             $(.myfile).change((){33                  objID  $.trim($(this).attr('ID));34                 myUpload(objID);35 36              @R_812_6403@ 37              myUpload(objID)38             {39                  _obj  $(#objID);40                  objVal  $.trim(_obj.val());41                 objVal){42                     alert(你还未选择图片！43                     return false44 45                 $.AJAXfileUpload({46                     type: post47                     url: upload.do48                     secureuri:49                     fileElementID:objID,1)">50                     dataType: 51                     success: (result) {52                          (result.code 153                             alert(上传文件成功！54                         }55                     },1)">56                     complete: (xmlhttpRequest) {57                         _obj.replaceWith(<input type="file"  ID="objID" name="" />58                         $(objID).on(change59                             myUpload(objID);60                         });61 62                     error: (data,1)">63                         alert(文件上传失败!64 65                 });66                 67             }68         });69     </>

 

代码文本如下：

<script>
$(document).ready(function () {
/* jquery handleError版本兼容 */
jquery.extend({
handleError: function (s,e) {
if (s.error) {
s.error.call(s.context || s,e);
}
if (s.global) {
(s.context ? jquery(s.context) : jquery.event).trigger("AJAXError",e]);
}
},
httpData: function (xhr,s) {
var ct = xhr.getResponseheader("content-type"),
xml = type == "xml" || !type && ct && ct.indexOf("xml") >= 0,
data = xml ? xhr.responseXML : xhr.responseText;
if (xml && data.documentElement.tagname == "parsererror")
throw "parsererror";
if (s && s.dataFilter)
data = s.dataFilter(data,type);
if (typeof data === "string") {
if (type == "script")
jquery.globalEval(data);
if (type == "Json")
data = window["eval"]("(" + data + ")");
}
return data;
}
});

/* file输入框变化时调用上传图片函数 */
$(".myfile").change(function(){
var objID = $.trim($(this).attr('ID'));
myUpload(objID);
});
/* @R_812_6403@ */
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" ID="'+objID+'" name="'+objID+'" />');
$("#"+objID).on("change",function(){
myUpload(objID);
});
},
error: function(data,e) {
alert("文件上传失败!");
}
});
return false;
}
});
</script>

 

done!

 

总结

以上是内存溢出为你收集整理的html input的file文件输入框onchange事件触发一次失效解决方法全部内容，希望文章能够帮你解决html input的file文件输入框onchange事件触发一次失效解决方法所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。