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

相关文章:

  • 2021-09-21
  • 2022-12-23
  • 2022-12-23
  • 2021-12-09
  • 2021-07-25
  • 2021-06-23
  • 2022-12-23
  • 2022-12-23
猜你喜欢
  • 2022-02-07
  • 2022-12-23
  • 2022-02-24
  • 2022-12-23
  • 2021-11-20
  • 2022-12-23
  • 2021-09-28
相关资源
相似解决方案