最近專案要支援excel上傳，主要要求：1、只能上傳excel，2、只能單檔案上傳。嘗試了幾個方法，如下

一、ajaxfileupload.js 這個用1.4以上版本會報handerError錯，網上找了幾個方法都沒有解決，顧放棄。

二、http://www.cnblogs.com/2050/p/3913184.html 這個是一個比較不錯的上傳外掛，支援HTML5、flash、silverlight以及傳統的<input type=”file” />,IE8以下用flash實現

這個網上已經有比較好的介紹了，http://www.cnblogs.com/2050/p/3913184.html 

首先明確一個概念：上傳佇列——準備上傳但未上傳

補充幾點：

原本是想在這個事件下做一個檔案型別的判斷，但是沒有找到取消該檔案新增到上傳佇列的方法。所以該事件不適用。

       該事件只能監聽當前檔案新增到上傳佇列後觸發，返回的files為當次上傳的所有檔案，上傳總佇列已有的是不顯示在內的。也不支援把當前上傳檔案從佇列中移除的方法。

該事件能監聽已上傳中的所有佇列。包括當前選中新增和歷史選中新增。

若多檔案上傳則每一個檔案上傳成功後的回撥可在responseObject裡

該事件沒有回掉函式，所以當所有檔案上傳成功的返回事件不能寫在這裡。

根據目前的專案相關要求發現的問題及解決如下：

html

        <input type="text" id="showFile" readonly>    //顯示上傳檔名
        <button class="flat_blue_highlight btn_select" id="selectFile">選擇檔案</button> //只是選擇檔案，新增至上傳佇列
        <button class="flat_blue_highlight" id="uploadFile">上傳</button> //上傳上傳佇列中的檔案
        <p class="tip">只支援上傳Excel檔案</p>
 

js

 var uploader = new plupload.Uploader({ //具體配置可見文件，當前設定了只支援xls,xlsx字尾名的excel，單次只能上傳一個檔案
        browse_button: "selectFile",
        file_data_name: "data",
        runtimes: "html5,flash",
        url: "excel.upload",
        filters: {
            mime_types: [{title: "excel", extensions: "xls,xlsx"}],
            prevent_duplicates: true
        },
        multi_selection: false,
        flash_swf_url: "/hug_interview/resources/plupload/plupload.swf"
    });
 

    uploader.init(); //初始化

    $("#uploadFile").click(function(){ //上傳
        uploader.start();
    });

1、只能單檔案上傳

配置中可以設定新增檔案時，不能多選，使得單次點選的時候只能選擇一個檔案。

但是當多次點選選擇檔案時，每次點選確定，選中的檔案都會新增到上傳佇列裡，而不是替換前一次上傳的檔案。

即第一次選擇檔案one.excel，上傳佇列為one.excel,當我在點選上傳之前想換一個檔案，重新點選選擇檔案two.excel，上傳佇列為one.excel,two.excel，實際上我們的期望效果是上傳佇列裡只有two.excel

解決方案：通過queueChanged來控制替換

 uploader.bind("QueueChanged", function (uploader) {
        //操作上傳總佇列，單次只允許上傳一個檔案
        if (uploader.files.length > 1) {
            uploader.splice(0, uploader.files.length - 1);
        }
        uploader.files[0].name?$("#showFile").val(uploader.files[0].name):$("#showFile").val("");
    });

上面說了UploadComplete事件沒有回撥函式，但好在我們只上傳一個檔案，所以可以使用FileUpload來實現

 uploader.bind("FileUploaded", function (uploader,file,responseObject) {
        console.log(responseObject);
    });

最原始簡單的方式，input type=file "選擇檔案"有自帶原始的樣式

       <form action="" method="post" enctype="multipart/form-data">
            <input type="file" name="file" />
            <button type="button" class="flat_blue_highlight"id="uploadFile" >上傳</button>
        </form>

    //上傳校驗
    $("#uploadFile").click(function () {
        $(this).attr("disabled",true);
        if(!($("#file").val().length > 0)) {
            art.dialog({ content: '請先選擇檔案！', icon: 'error', time: 1.5});
            $(this).removeAttr("disabled");
            return false;
        }
        var fileName=$("#showFile").val();
        var fileType =fileName.substring(fileName.lastIndexOf("."));
        if(fileType != ".xlsx" && fileType != ".xls"){
            art.dialog({ content: '只能選擇excel檔案！', icon: 'error', time: 1.5});
            $("#file,#showFile").val("");
            $(this).removeAttr("disabled");
            return false;
        }
        $("form").submit();
    });

  原始樣式

希望樣式

所以改成自己寫一個input框顯示檔名，寫一個選擇檔案Button,通過點選呼叫模擬點選原始的選擇檔案功能，如下：

html:

    <form action="" method="post" enctype="multipart/form-data">
            <input type="text" id="showFile" readonly>
            <input type="file" name="file" id="file" style="display:none;"/>
            <button type="button" class="flat_blue_highlight" id="selectFile">選擇檔案</button>
            <button type="button" class="flat_blue_highlight" id="uploadFile">上傳</button>
        </form>

//獲取檔案後賦值顯示
    $("#file").change(function () {
        //擷取路徑中的檔名
        var file = $(this).val();
        var pos=file.lastIndexOf("\\");
        var fileName = file.substring(pos+1);
        $("#showFile").val(fileName)
    });
//模擬點選
$("#selectFile").click(function(){
 $("#file").trigger("click");
})

html

        <form action="" method="post" enctype="multipart/form-data">
            <input type="text" id="showFile" readonly>
            <input type="file" name="file" id="file" class="selectFile"/>
            <button type="button" class="flat_blue_highlight btn_select">選擇檔案</button>
            <button type="button" class="flat_blue_highlight" id="uploadFile">上傳</button>
        </form>

.selectFile{
    opacity:0;
    filter:Alpha(opacity=0);
    height: 24px;
    position: absolute;
    width: 227px;
    left: 15px;
    cursor: pointer;
}