前端文件上传方法 支持IE8（插件和原生方法）

最近项目要支持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 

首先明确一个概念：上传队列——准备上传但未上传的文件集

补充几点：

1、FileFiltered 该事件会在每一个文件被添加到上传队列前触发

原本是想在这个事件下做一个文件类型的判断，但是没有找到取消该文件添加到上传队列的方法。所以该事件不适用。

2、FilesAdded 当文件添加到上传队列后触发  ，监听函数参数：(uploader,files)

       该事件只能监听当前文件添加到上传队列后触发，返回的files为当次上传的所有文件，上传总队列已有的是不显示在内的。也不支持把当前上传文件从队列中移除的方法。

3、QueueChanged 当上传队列发生变化后触发，即上传队列新增了文件或移除了文件，监听函数参数：(uploader)

该事件能监听已上传中的所有队列。包括当前选中添加和历史选中添加。

4、FileUploaded 当队列中的某一个文件上传完成后触发，监听函数参数：(uploader,file,responseObject)

若多文件上传则每一个文件上传成功后的回调可在responseObject里

5、UploadComplete 当上传队列中所有文件都上传完成后触发，监听函数参数：(uploader,files)

该事件没有回掉函数，所以当所有文件上传成功的返回事件不能写在这里。

根据目前的项目相关要求发现的问题及解决如下：

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("");
    });

2、上传后的回调

上面说了UploadComplete事件没有回调函数，但好在我们只上传一个文件，所以可以使用FileUpload来实现

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

三、利用原生用input type=file+form表单提交的方法

最原始简单的方式，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>
js:

//获取文件后赋值显示
    $("#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");
})

但是在IE8下，这样的模拟触发没有效果，网上搜寻方法后，只能将input type=file 设置为透明，设置为绝对定位覆盖在选择文件的button上，以实际点击来触发

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>
 
css

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