ajaxFileUpload.js 插件上傳圖片遇到的坑

用 ajaxFileUpload 上傳圖觸發一次change事件后，下次就不會再觸發change事件 ，必須要刷新頁面才可以再次上傳

修改前的寫法：

  $('#uploadFile').change(function () {
            var f = document.getElementById('uploadFile').files[0]
            if (f.size > 2 * 1024 * 1024) {
                dialogMsg("文件過大, 建議文件小於2M", -1);
                return;
            }
            var src = window.URL.createObjectURL(f);
            document.getElementById('uploadPreview').src = src;

            //上傳應用圖標
            $.ajaxFileUpload({
                url: "/Member/UploadFile",
                secureuri: false,
                fileElementId: 'uploadFile',
                dataType: 'json',
                success: function (data) {
                    $("#up_license").val(data.resultdata.path);
                    dialogMsg(data.message, 1);
                 
                }
            });
        });

第一次可以上傳，第二次重新上傳沒有觸發，原因是由於ajaxFileUpload把原來的file元素替換成新的file元素，導致change事件失效

網上說將ajaxFileUpload源碼為jQuery(oldElement).clone()）改為$(oldElement).clone(true) 這樣可以在復制元素的同時復制事件 然而處理后並沒有起作用。

有人說重新綁定change事件，於是：

修改后的寫法：

   $('#uploadFile').change(function () {
            UploadImg();
        });
        UploadImg = function () {
            var f = document.getElementById('uploadFile').files[0]
            if (f.size > 2 * 1024 * 1024) {
                dialogMsg("文件過大, 建議文件小於2M", -1);
                return;
            }
            var src = window.URL.createObjectURL(f);
            document.getElementById('uploadPreview').src = src;

            //上傳應用圖標
            $.ajaxFileUpload({
                url: "/Member/UploadFile",
                secureuri: false,
                fileElementId: 'uploadFile',
                dataType: 'json',
                success: function (data) {
                    $("#up_license").val(data.resultdata.path);
                    dialogMsg(data.message, 1);
                    $('#uploadFile').change(function () { //重新綁定事件
                        UploadImg();
                    });
                }
            });
        }

在回調函數里 重新綁定change事件，這樣就change事件失效的問題就解決了，親測，有效！！