IE9下jQuery-File-Upload使用（後台為Java Spring MVC）

標籤：accept   htm   style   auto   操作   頁面   ali   cep   ret   

前言 項目中有個頁面跑在IE9的環境下，需要一個簡單的檔案上傳功能。嘗試了一下kendo ui 的upload組件，發現在IE9下回呼函數有bug。沒辦法網上查了一波，都說jQuery-File-Upload外掛程式好用，遂下載使用,並且成功了。

這裡提供一個DEMO，並記錄一下注意事項。

首先是下載外掛程式，然後按順序引用

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>  //建議使用jQuery 1.8以上版本<script src="js/vendor/jquery.ui.widget.js"></script><script src="js/cors/jquery.xdr-transport.js"></script><script src="js/jquery.iframe-transport.js"></script>                               //在IE下應載入此檔案解決跨域問題<script src="js/jquery.fileupload.js"></script><script src="js/jquery.fileupload-process.js"></script><script src="jquery.fileupload-validate.js"></script>                               //如果需要檔案類型驗證必須引入

然後新增一個簡單的input:

<input name="files" id="files" type="file"/> 

注意一下，如果為了介面好看，把這個input隱藏掉，然後使用自己的按鈕，並在JS裡觸發這個input的click事件的話，在IE8下會有無法觸發回調的BUG，我因為是IE9沒有遇到這個問題。

然後是JS代碼：

                        $("#files").fileupload({                                url: uploadurl,         //伺服器的URL                                dataType: ‘json‘,       //設定返回資料格式                                autoUpload: true,                                acceptFileTypes: /(\.|\/)(png|jp?g|gif)$/i,//檔案格式限制                                formData: {}     //可傳入參數                                processfail: function (e, data) {              //驗證檔案類型                                    var currentFile = data.files[data.index];                                    if (data.files.error && currentFile.error) {                                        alert("檔案類型錯誤!");                                    }                                },                                done: function (e, data) {                                    var result = JSON.parse(data.result);   //這裡注意，IE返回資料後，要用JSON.parse進行處理                                    //之後自行處理                                }                            }).error(function () {                                     console.log(arguments, ‘error‘);                            });

 

上後端代碼之前先說一下，正常情況下在IE9上傳檔案後，會彈出下載JSON檔案的框。查了下資料，發現

這是由於jQuery File Upload都是採用XHR在傳遞資料，伺服器端返回的通常是JSON格式的響應，但是IE會將這些JSON響應誤認為是檔案傳輸，然後直接彈出下載框詢問是否需要下載。

解決的辦法是將回應標頭從Content-Type: application/json   更改為Content-Type: text/plain或者text/html

下面JAVA後台代碼：

@RequestMapping(value = "/uploadurl", method = RequestMethod.POST, produces = {"text/plain"})    public String upload(@RequestParam MultipartFile files, @RequestParam Map formData) {        InputStream fis=files.getInputStream(); //檔案流        String fileName=files.getOriginalFilename(); //檔案路徑        //做自己的操作               result="true";
        return result;
    }

最後還有一個問題，更改回應標頭後傳回值最好是String或者JSON類型的，不然的話，前端會無法觸發回呼函數。

初次嘗試jQuery-File-Upload，還有很多強大的功能還沒用到，後台代碼也比較簡潔，其他再自行摸索。

嗯，最後吐槽一句IE真該淘汰了。

IE9下jQuery-File-Upload使用（後台為Java Spring MVC）