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

  • 相关阅读:
    一些PC小软件/工具/神器备份
    三角函数与反三角函数
    常用网站整理(书签整理)
    谷歌和谷歌学术镜像网站
    微擎系统jssdk系统快速签名变量
    phpexcel 导入超过26列时的解决方案
    js循环对象,(多层数组)
    CentOS 6 下无法wget https链接的解决方法
    centos6 7 yum安装mongodb 3.6
    yum except KeyboardInterrupt, e: 错误
  • 原文地址:https://www.cnblogs.com/lemonmoney/p/9493331.html
Copyright © 2011-2022 走看看