jQuery-File-Upload不相容IE8解決方案

jQuery-File-Upload ADD方法沒呼叫

================================

©Copyright 蕃薯耀 2018年12月27日

http://fanshuyao.iteye.com/

一、問題描述：

在IE8模式下

<meta http-equiv="X-UA-Compatible" content="IE=8" />

 jQuery-File-Upload點選上傳檔案按鈕選擇檔案後出現無反應、檔案不上傳的問題

二、解決方案：

1、首先看Html程式碼：

<a id="btnUploadMdbFile" href="javascript:;" class="plui-linkbutton" >上傳mdb檔案</a> 
<div style="display: none;">
    <input id="inputUploadMdbFile" type="file" name="mdbFiles" />
</div>

 引用的js

<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.ui.widget.js"></script> 
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.iframe-transport.js"></script>	
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.fileupload.js"></script>	

通過一個A標籤的按鈕的點選，去觸發選擇檔案上傳type="file"的控制元件，這樣頁面美觀，使用者體驗好，這個操作在IE11是可以正常上傳的。

但在IE8模式下，jQuery-File-Upload不能正常上傳，選擇檔案後無反應、無法自動上傳檔案。

2、js除錯問題

發現選擇檔案後，jQuery-File-Upload的ADD方法並未呼叫。就是檔案沒有被新增到jQuery-File-Upload中，即jQuery-File-Upload識別不到上傳的檔案。

網上查詢原因，說是：

IE8出於安全性，不允許這麼做

IE doesn’t allow manipulation of the type=”file” input element from javascript due to security reasons. Setting the filename or invoking a click event to show the browser dialog will result in an “Access is denied” error on the form submit.

3、jQuery-File-Upload上傳原理

a、對某個file input標籤執行 upload外掛的初始化方法後，外掛會監聽這個file input的change事件

b、當選擇檔案的時候，會觸發change事件

if ($.support.fileInput) {
     this._on(this.options.fileInput, {
         change: this._onChange
     });
}

c、在_onChange處理函式中，會遍歷files，觸發upload外掛的change方法

d、當change函式返回true的時候，會觸發upload外掛的add方法

e、在upload外掛的回撥函式中，會傳入兩個引數，fn(事件資訊, 資料物件)

f、在upload外掛的add方法中可以執行自己寫的邏輯

例如想判斷檔案字尾是否滿足條件，外掛自帶的引數 acceptFileTypes 在簡化模型中不起作用，我們可以在change和add方法中判斷，如果不滿足返回false即可，如果通過可以直接執行data.submit()進行提交

add: function(e, data){
  //var acceptFileTypes = /^(gif|jpe?g|png)$/i;//圖片
  var acceptFileTypes = /^mdb$/i;
  var files = data.originalFiles;
  if(files && files.length > 0){
    var isPass = true;
    for(var i=0; i<files.length; i++){
        var name = files[i]["name"];
        var lastIndex = name.lastIndexOf(".");
        if(lastIndex < 0){
            isPass = false;
            break;
        }else{
            var fileType = name.substring(lastIndex + 1);
            if(!acceptFileTypes.test(fileType)){
                isPass = false;
                break;
            }
        }
    }
    if(!isPass){
        top.$.messager.alert("系統提示","只能上傳型別為*.mdb的檔案","info"); 
        return;
    }
        top.loading("檔案上傳中，請等待…");
        data.submit();
    }
}

g、當上傳成功會執行done函式（響應成功），失敗則會執行fail函式

 就是由於IE8的原因，導致jQuery-File-Upload沒有觸發到onchange事件，導致識別不到檔案，沒有呼叫add方法。

 4，修改Html程式碼

<div style="display: inline-block;position: relative;">
    <a id="btnUploadMdbFile" href="javascript:;" class="plui-linkbutton" >上傳mdb檔案</a> 
    <input id="inputUploadMdbFile" type="file" name="mdbFiles" style=""/>
</div>	

5、增加css程式碼

<style type="text/css">
#inputUploadMdbFile{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	right: 0;
	opacity:0;
	filter:alpha(opacity=0);
	cursor: pointer;
}
</style>

 6、解決原理

利用絕對、相對定位，把上傳元件（type="file"）定位在按鈕上面，然後把上傳元件的透明度設定成0，達到隱藏的效果，當點選按鈕時，其實是點選了上傳元件，這樣避免IE隱藏上傳元件的問題。

資料參考：

https://blog.csdn.net/huangpin815/article/details/72888340

https://www.cnblogs.com/tgwang/p/4629645.html

================================

©Copyright 蕃薯耀 2018年12月27日

http://fanshuyao.iteye.com/