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

posted @ 2018-08-17 15:00  柠檬青味  阅读(1766)  评论(0编辑  收藏  举报