html input的file文件输入框onchange事件触发一次失效解决方法

最近在做一个图片上传的功能,出现提交一次后,file输入框的change事件无法再次触发的bug,就是说提交一次后必须刷新才能再次提交,这就坑了~

于是想办法解决它~

在网上找了一些资料,找到这几种方法:

1、替换掉原来的input框
2、remove原来的input框,然后在添加进新的一样的input框

我测试了之后发现可以用下面的方法解决这个问题:
第一步:上传完成后替换掉原来的input框
第二步:重新绑定onchange事件

问题解决!!

代码如下:

<script>
        $(document).ready(function () {
            /* jquery handleError版本兼容 */
            jQuery.extend({
                handleError: function (s, xhr, status, e) {
                    if (s.error) {
                        s.error.call(s.context || s, xhr, status, e);
                    }
                    if (s.global) {
                        (s.context ? jQuery(s.context) : jQuery.event).trigger("ajaxError", [xhr, s, e]);
                    }
                },
                httpData: function (xhr, type, s) {
                    var ct = xhr.getResponseHeader("content-type"),
                        xml = type == "xml" || !type && ct && ct.indexOf("xml") >= 0,
                        data = xml ? xhr.responseXML : xhr.responseText;
                    if (xml && data.documentElement.tagName == "parsererror")
                        throw "parsererror";
                    if (s && s.dataFilter)
                        data = s.dataFilter(data, type);
                    if (typeof data === "string") {
                        if (type == "script")
                            jQuery.globalEval(data);
                        if (type == "json")
                            data = window["eval"]("(" + data + ")");
                    }
                    return data;
                }
            });

            /* file输入框变化时调用上传图片函数 */
            $(".myFile").change(function(){
                var objId = $.trim($(this).attr('id'));
                myUpload(objId);
            });
            /* 上传函数 */
            function myUpload(objId)
            {
                var _obj = $('#'+objId);
                var objVal = $.trim(_obj.val());
                if(!objVal){
                    alert('你还未选择图片!');
                    return false;
                }
                $.ajaxFileUpload({
                    type: "post",
                    url: "upload.do",
                    secureuri:false,
                    fileElementId:objId,
                    dataType: "json",
                    success: function(result) {
                        if (result.code == "1") {
                            alert("上传文件成功!");
                        }
                    },
                    complete: function(xmlHttpRequest) {
                        _obj.replaceWith('<input type="file" class="myFile" id="'+objId+'" name="'+objId+'" style="display:none;"/>');
                        $("#"+objId).on("change", function(){
                            myUpload(objId);
                        });
                    },
                    error: function(data, status, e) {
                        alert("文件上传失败!");
                    }
                });
                return false;
            }
        });
    </script>

出处:www.l1mn.com

原文标题:html input的file文件输入框onchange事件触发一次失效解决方法

原文地址:https://www.l1mn.com/p/od6pt3.html

本文版权归作者所有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接。

评论

皖ICP备2023023451号

Copyright © L1MN.COM 联系方式:l1mnfw@163.com