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

  • 相关阅读:
    图论 —— tarjan 缩点 割点 (学习历程)连载中......
    模拟赛记
    模板(按照洛谷顺序)
    CSP-S退役记
    各知识点运用技巧总结
    P3665 [USACO17OPEN]Switch Grass
    跳跳棋——二分+建模LCA
    P3043 [USACO12JAN]牛联盟Bovine Alliance——并查集
    [ZJOI2013]K大数查询——整体二分
    CF741D Arpa’s letter-marked tree and Mehrdad’s Dokhtar-kosh paths——dsu on tree
  • 原文地址:https://www.cnblogs.com/lemonmoney/p/9493331.html
Copyright © 2011-2022 走看看