1.基本思路

在谷歌下以<input type=’file’/>為基本的條件，並且使他隱藏，通過點選提交按鈕被動觸發上傳檔案的事件，這裡不需要用到表單提交的相關問題，在js方面，使用formData，通過獲取<input type=”file”>標籤的files屬性，來獲得檔案相關的內容，之後再將後臺所需的引數加上就可以進行ajax請求上傳了。

2.IE8下的處理

首先需要使用ajaxSubmit的外掛，需要引入以下依賴包，但是注意，ie8下的只能識別1.x 的JQuery，不然會報錯說（不支援ajaxSubmit的方法）

<script src="../../js/jquery-latest.js"></script>

<scriptsrc="http://code.jquery.com/jquery-migrate-1.2.1.js"></script>

<script src="../../js/jquery.form.js"></script>

然後需要以form表單的形式提交，且必須要有enctype屬性，同時這裡要特別注意的是表單不能巢狀，如果出現這樣的問題，有兩種解決的方式，一種是上傳的時候，直接使用原表單，但是請求和上傳相關的介面，一種是在外面寫一個新的表單，加上自己所需要的那些資料，第一種顯然是更簡單的.

<form id="gp" method="post" enctype="multipart/form-data"></form>

之後就是請求ajax的介面，但是注意這裡需要將後臺返回的資料，轉化為json的格式。

還有一個問題就是關於ie8下必須手動觸發，不然會顯示拒絕訪問，這其中可以用一個div包裹<input type=”file”>標籤來解決，同時要注意設定css樣式，注意谷歌下和ie8下<input type=”file”>標籤的按鈕位置不同。

3.所有程式碼

以下程式碼基於layui

（1）html

//如果最外層還有form，那麼這個form標籤可以不要
<form class="layui-form" enctype="multipart/form-data" id="fileLoad">
    <div class="layui-row">
        <div class="layui-form-item schedule-item width100">
            <label class="layui-form-label">附件：</label>
            <div class="layui-input-block ml80" id="fileUp">
                //自己所需要傳的值
                <input type="text" name="sceneValue" value="400200101" style="display: none"/>
                 <input type="text" name="resourceType" value="400100101" style="display: none"/>
                   <input type="text" name="resourceId" value="" style="display: none"/>
                   <input type="text" name="accessoryName" value="1.jpg" style="display: none"/>
                //自己所需要傳的值結束
                //處理IE8下必須手動觸發<input type="file">標籤的問題，樣式需要自己根據實際情況設定
                <div style="position:absolute;left:0px;top:-1px;height:30px;line-height:30px;width:68px;overflow:hidden">
                    <input type="file" id="mineFiles" name="file" style="margin-left:-155px;height:100%;line-height:100%;opacity:0;filter:alpha(opacity:0)"/>
                </div>
                <button type="button" class="layui-btn layui-btn-sm layui-btn-normal openFile" id="upLoad">新增附件</button>
            </div>
        </div>
    </div>
</form>
 

（2）js

$(".openFile").click(function () { 
    //按鈕被點選，觸發標籤點選事件，只有在非IE8下才有效果
    $("#mineFiles").click();
});
//實際的標籤點選事件
$("#mineFiles").change(function (e) {
//IE8瀏覽器的判斷
if (navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion.split(";")[1].replace(/[ ]/g, "") == "MSIE8.0") {
//一些需要動態的賦值
$("#accessoryName").val($("#mineFiles").val().split('\\')[2]);
$("#fileLoad").ajaxSubmit({
 url : PUB_AJAX_Url + "accessory/upload",
type : "post",
//應該為text
dataType : 'json',
success : function(data) {
console.log(data);
//相關的處理
}
error : function(data) {
console.log(data);}
});
}else{
//非IE8下使用formData
var formdata = new FormData();
formdata.append("sceneValue", "400200101");
formdata.append("resourceType", "400100101");
formdata.append("resourceId", fileData.resourceId);
//拿到相關的檔案
var doc = document.getElementById("mineFiles");
formdata.append("file", doc.files[0]);
formdata.append("accessoryName", doc.files[0].name);
var typeArr = doc.files[0].name.split('.');
var myFileType = typeArr[typeArr.length - 1];
$.ajax({
url: PUB_AJAX_Url + "accessory/upload",
type: "post",
data: formdata,
cache: false,
processData: false,
contentType: false,
//開始loading
beforeSend: function () {
i = layer.msg('附件上傳中...', {
icon: 16,
shade: [0.5, '#f5f5f5'],
scrollbar: false,
offset: '0px',
time: 100000
});
},
success: function (res) {
//相關處理
}
});
}