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

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

于是想办法解决它~

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

1、替换掉原来的input框

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

我测试了之后发现可以用下面的方法解决这个问题：

第一步：上传完成后替换掉原来的input框

第二步：重新绑定onchange事件

问题解决！！

代码如下：

1

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 varct=xhr.getResponseHeader(content-type),1)">15 xmltype== xml" || !type&&ct.indexOf()>= 016 dataxmlxhr.responseXML : xhr.responseText;17 (xmldata.documentElement.tagNameparsererror)18 throw ;19 (ss.dataFilter)20 s.dataFilter(data,type);21 (typeofdata=== string) {22 (typescript23 jQuery.globalEval(data);24 json25 datawindow[eval]((++ ));26 27 returndata;28 }29 });30

31 file输入框变化时调用上传图片函数32 $(.myFile).change((){33 objId$.trim($(this).attr('id));34 myUpload(objId);35 36 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.code153 alert(54 }55 },1)">56 complete:(xmlHttpRequest) {57 _obj.replaceWith(58 $(objId).on(change59 myUpload(objId);60 });61 62 error:(data,1)">63 alert(64 65 });66 67 }68 });69 >

代码文本如下：

$(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);

});

/* 上传函数 */

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('');

$("#"+objId).on("change",function(){

myUpload(objId);

});

},

error: function(data,e) {

alert("文件上传失败!");

}

});

return false;

}

});

done!

总结

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

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。

小编个人微信号 jb51ccc

喜欢与人分享编程技术与工作经验，欢迎加入编程之家官方交流群！