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事件失效的问题就解决了，亲测，有效！！

转载于:https://www.cnblogs.com/lemonmoney/p/9493331.html