zoukankan      html  css  js  c++  java
  • 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事件失效的问题就解决了,亲测,有效!!

  • 相关阅读:
    UML类图的关系
    软工视频总结
    面向对象——(1)概述
    软件工程——整体把握
    白盒测试中的逻辑覆盖
    机房收费调试问题(二)
    机房收费调试问题(一)
    如何将ER图转换成关系模式集
    机房收费之感想与收获
    【linux】U盘安装启动出现press the enter key to begin the installation process 就不动弹了
  • 原文地址:https://www.cnblogs.com/lemonmoney/p/9493331.html
Copyright © 2011-2022 走看看