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); } });
2.
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不断的上传(这是个变态的测试。。。)