IE浏览器下上传文件的解决方案

最新推荐文章于 2022-02-25 11:08:58 发布

原创最新推荐文章于 2022-02-25 11:08:58 发布 · 9.5k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#浏览器 #ie #file #function #div #image

JavaScript 专栏收录该内容

74 篇文章

订阅专栏

本文介绍了一种解决IE浏览器无法正确监听File元素change事件的方法。通过创建一个覆盖全屏的div层，并利用setInterval定时检查File元素的值来解决这一问题。特别关注了IE浏览器下的实现细节及文件上传后的清理工作。

1.

//针对IE浏览器不能对File元素change事件进行正确的监听。

$("#attachmentFile,#imageFile").live("click", function() {
            
            //针对IE浏览器不能对File元素change事件进行正确的监听。
            if ($.browser.msie) {

                var inputID = $(this).attr("id");
                var isImageFile = (inputID.indexOf("image") != -1); //判断是imageFile还是attachmentFile


                //为页面添加一个div层，当文件选择完毕，鼠标在层上移动时，提交文件。
                var $loadwarp = $("<div class=\"loadwarp\"></div>");
                if (parseInt($.browser.version) <= 6)
                    $loadwarp.css("height", document.documentElement.clientHeight + "px");
                $("body").append($loadwarp);


                //绑定div层的hover事件
                $loadwarp.hover(function() {
                    clearInterval(intervalID); //清除setInterval事件
                    updateImageOrAttacn(isImageFile);
                    $(this).remove(); //清除div层
                }, function() { });


                //针对文件选择完毕，鼠标没有移动时的情况
                var intervalID = setInterval(function() {
                    //alert($("#" + inputID)[0].value);
                    if ($("#" + inputID)[0].value != "") {
                        $loadwarp.trigger("mouseover");
                    }
                }, 1000);
            }
        });

function setImageLoading() {
            var imagePath = $("#imageFile").val();
            //由于IE的缘故，在每次上传文件后都要清除File元素的值，而且不能对File元素赋值，所以每次在清除File元素的值后，都要将其值赋到imageFile属性中。
            if (imagePath != "" && imagePath != $("#imageFile").attr("imagePath")) {
                //alert("setImageLoading" + imagePath);
                var type = imagePath.substr(imagePath.lastIndexOf(".")).toUpperCase();
                if (type == ".JPEG" || type == ".JPG" || type == ".GIF" || type == ".PNG") {
                } else {
                    //alert("不支持该文件格式");
                    $.dialog.tips(RS.Core.Language.getLang("Mood_Static_MoodUploadTypeError"), 2);
                    return false;
                }
                if (!checkFileSize($("#imageFile")[0]))
                    return false;
                $("#spanImgUploaded").addClass("none");
                $("#spanImgUpLoading").removeClass("none");
                $("#uploadImageForm").submit();
                if ($.browser.msie) {
                    setTimeout(function() {
                        RS.Widgets.AttachBar.clearFileInputByClone("imageFile");
                        $("#imageFile").attr("imagePath", imagePath);
                    },
                    1000);
                }
            }
        }

3.  clearFileInputByClone = function(fileId) {
        var fileInput = document.getElementById(fileId);
        fileInput.outerHTML += '';
        fileInput.value = "";
        return;
        //        var tempHTML = $("#" + fileId).parent().html();
        //        $("#" + fileId).parent().html(tempHTML);
    }

注释：上面的代码主要看有注释的地方。

思想：因为IE浏览器不能对File元素change事件进行正确的监听。所以在点击File按钮时，要生成一个层（有整个页面大），当用户选择好文件后，鼠标在页面移动时提交文件。但是其中有一个bug，当用户用“enter”键代替鼠标时，就存在一段等待时间（特别是用户不移动鼠标，一直认真等待，那就。。。），所以在click ，File元素时，执行一个setInterval（）函数，定时检查File的值，如果File值不为空，触发刚才层的mouseover事件（包括1。清除setInterval（）函数；2.提交文件；3，清除自身层）。

注意点：在IE下，每次提交文件，都要删除File里面的值，清除值的方法比较特殊，上面已有。如果不删除可能会影响File不断的上传（这是个变态的测试。。。）