1. 程式人生 > >html input的file檔案輸入框onchange事件觸發一次失效解決方法

html input的file檔案輸入框onchange事件觸發一次失效解決方法

最近在做一個圖片上傳的功能,出現提交一次後,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>

程式碼文字如下:

<script>
$(document).ready(function () {
/* jquery handleError版本相容 */
jQuery.extend({
handleError: function (s, xhr, status, e) {
if (s.error) {
s.error.call(s.context || s, xhr, status, e);
}
if (s.global) {
(s.context ? jQuery(s.context) : jQuery.event).trigger("ajaxError", [xhr, s, e]);
}
},
httpData: function (xhr, type, 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('<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!