前端文件上传方法 支持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: 'erro
a3f7
r', 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;
}