前端檔案上傳方法 支援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
首先明確一個概念:上傳佇列——準備上傳但未上傳
補充幾點:
原本是想在這個事件下做一個檔案型別的判斷,但是沒有找到取消該檔案新增到上傳佇列的方法。所以該事件不適用。
該事件只能監聽當前檔案新增到上傳佇列後觸發,返回的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("");
});
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;
}