formData文件上傳兼容IE8

場景：XP環境IE8版本的瀏覽器，在iframe內文件上傳

問題：

1、使用webupload

 在ie8下模擬點擊打開文件選擇器，按鈕點擊無反應。

查閱資料後，得知原因是webupload在ie8下使用的是flash顯示，不存在input文件選擇，所以模擬點擊無效。

手動直接點擊打開文件選擇器，第二次點擊按鈕無反應。

查閱資料後，發現webupload選擇器放在datagrid表格裏，兩個插件可能存在相互影響，造成功能不完美，所以果斷放棄。

2、使用jquery.form

在ie8下使用模擬點擊打開文件選擇器，提示“拒絕訪問”。

查閱資料後，得知原因是IE下 file表單控件，不能用js控制打開文件選擇器，必須要手動點擊纔可以，否則會報 “拒絕訪問”。

所以在datagrid單元格內，手動寫一個按鈕覆蓋input=file，同時點擊事件穿透到input=file上面來打開文件選擇器。

解決方案：

手動寫一個按鈕覆蓋input=file，同時點擊事件穿透到input=file上面來打開文件選擇器。

3、代碼展示：

/* 選擇文件按鈕化a */
.a-upload {
    position: relative;
    padding: 0 10px;
    height: 30px;
    line-height: 30px;
    cursor: pointer;
    color: #fff;
    background: #0094F5;
    border-radius: 3px;
    overflow: hidden;
    vertical-align: bottom;
    display: inline-block;
}

/* 選擇文件按鈕化a input */
.a-upload  input {
    position: absolute;
    font-size: 100px;
    left: 0;
    top: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    filter: alpha(opacity=0);
    cursor: pointer
}

uploadFile: function ($this, $form, params, url, call) {
            var fileName = "";
            var filePath = $this.val();
            if (filePath) {
                var arr = filePath.split('\\');
                fileName = arr[arr.length - 1];
            }
            var ajax_option = {
                type: "POST",
                url: url,
                // dataType: "json",
                data: params,
                cache: false,
                contentType: false,
                processData: false,
                timeout: 300000,
                statusCode: {},
                success: function (res) {
                    // 接口返回值需要是text類型
                    if (typeof res == "object") {
                        top.layer.close(loadIndex);
                        top.$.tools.showMsg(res.errorInfo || "網絡錯誤！", "error");
                        $form[0].reset();
                        return false;
                    }
                    res = JSON.parse(res);
                    if (res.status == 0) {
                        top.layer.close(loadIndex);
                        top.$.tools.showMsg("文件上傳成功！", "success");
                        $form[0].reset();
                        call && call(res);
                    }
                    else {
                        top.layer.close(loadIndex);
                        top.$.tools.showMsg(res.errorInfo || "文件上傳失敗！", "warning");
                        $form[0].reset();
                    }
                },
                error: function (err) {
                    top.layer.close(loadIndex);
                    top.$.tools.showMsg(err.errorInfo || "文件上傳失敗！", "warning");
                    $form[0].reset();
                }
            };
            $form.ajaxSubmit(ajax_option);
            var loadIndex = top.layer.msg('正在上傳：' + fileName, {
                icon: 16,
                // 0.5透明度的黑色背景
                shade: [0.0, "#FFF"],
                // 取消自動關閉
                time: false
            });
        },

<a href="javascript:;" class="a-upload">
    <form id="upload-form" method="post" action="" enctype="multipart/form-data">
      <input class="file" id="excel-upload" name="file" type="file" accept=".csv,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel">
           上傳文件
    </form>
</a>