首页 > Web开发 > 详细

如何让file input能够实现置空和【异步】上传后相同文件的再次选择触发change

时间:2015-07-20 09:10:44      阅读:446      评论:0      收藏:0      [点我收藏+]

file input出于安全角度,是不允许赋值的,即使是置空,虽然通过给innerHtml赋值可以清空,但貌似仅在ie下起使用。

因为缺少置空的方法,用户异步上传完毕文件后选择相同文件时,不会触发change,因为在这种情况下,我们没有办法使value(也就是文件路径)发生变化。

那难道就无解了么。。当然不是。。

我的解决方法是,每次选完文件,就重建此元素,这样值自然是空的,因为clone不带值,这样就是一个全新的file input,每一次选择,自然各种正常。以下是关键代码:

                <label id="realBtn" class="btn btn-info">
                    <input type="file" id="fileInput1" name="file" class="mFileInput" style="left:-9999px;position:absolute;">
                    <span>导入EXCEL数据</span>
                </label>
function uploadfile(eventP) {
            var files = eventP.target.files;
            if (files.length == 0) {
                showMsg("请选择文件");
                return;
            }
            $(".loadingTxt1").hide().html("正在上传并生成预览 ...").fadeIn(200);
            var xhr = false;
            try {
                xhr = new XMLHttpRequest();//尝试创建 XMLHttpRequest 对象,除 IE 外的浏览器都支持这个方法。
            } catch (e) {
                xhr = ActiveXobject("Msxml12.XMLHTTP");//使用较新版本的 IE 创建 IE 兼容的对象(Msxml2.XMLHTTP)。
            }
            if (xhr.upload) {
                // 文件上传成功或是失败
                xhr.onreadystatechange = function (e) {
                    if (xhr.readyState == 4) {

                        if (xhr.status == 200) {
                            var data = JsonTool.parse(xhr.responseText)
                            if (data.result == "Success") {
                                $(".loadingTxt1").hide().html("本次上传数据 " + data.msg.length + " 条。").fadeIn(200).fadeOut(5000);
                                displayDataList("dataList1", data.msg);
                            }
                            else {
                                showMsg(data.msg);
                            }
                        } else {
                            showMsg(xhr.responseText);
                        }
                        //清除文件选择框中的已有值
                    }
                };
                xhr.open("POST", "/umbraco/Surface/FileDownLoadSurface/Upload", true);
                xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");

                var fd = new FormData();
                fd.append("file", files[0]);
                xhr.send(fd);
            }
            var jqObj = $("#fileInput1");
            jqObj.val("");
            var domObj = jqObj[0];
            domObj.outerHTML = domObj.outerHTML;
            var newJqObj = jqObj.clone();
            jqObj.before(newJqObj);
            jqObj.remove();
            $("#fileInput1").unbind().change(function (e) {
                //alert("ab");
                uploadfile(e);
            });
        }
最好在开始上传后,隐藏或禁用上传按钮,以误点击导致的重发,上传处理完毕后,重新显示或启动上传按钮。

  

如何让file input能够实现置空和【异步】上传后相同文件的再次选择触发change

原文:http://www.cnblogs.com/laozuan/p/4660405.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!