項(xiàng)目中涉及到的上傳
項(xiàng)目中涉及到需要上傳文件的需求很多，簡單的有上傳用戶頭像砾赔，復(fù)雜一些的有文件管理系統(tǒng)中的文件上傳蝌箍，可以做到斷點(diǎn)續(xù)傳，分片上傳暴心，大文件上傳妓盲，上傳文件夾等功能。
1专普、用戶頭像上傳或證書上傳（form+iframe）
首先來說說頭像上傳本橙，幾乎所有需要用戶登錄的網(wǎng)站都需要支持用戶上傳頭像。我做的項(xiàng)目需要兼容低級(jí)瀏覽器脆诉，所以通過form+iframe這種簡單的方式來實(shí)現(xiàn)甚亭。
<form name="uploadFigure" target="asyncUpload" action="/avatar/upload/" method="post" enctype="multipart/form-data">
<input class="upload" name="avatar" type="file">
</form>
<iframe name="asyncUpload" src="proxy.html" style="display:none"></iframe>
接著，我需要獲取接口的返回值進(jìn)行下一步操作击胜。
$('iframe').on('load', function() {
var resText = $('iframe')[0].contentDocument.body.textContent;
var res = JSON.parse(responseText) || {};
if (res.code == 0) {
//success
} else {
//error
}
});
或者
$('iframe').on('load', function() {
var frame = frames['asyncUpload'];
var res = JSON.decode(frame.document.body.innerHTML);
if(res) {
if(res.code == 0) {
//success
}
else
//error
}
}
});
2亏狰、文件上傳（采用flash上傳）
項(xiàng)目最早使用的是SWFUpload上傳，SWFUpload是一個(gè)客戶端文件上傳工具偶摔，它通過整合Flash與JavaScript技術(shù)為WEB開發(fā)者提供了一個(gè)具有豐富功能繼而超越傳統(tǒng)<input type="file" />標(biāo)簽的文件上傳模式暇唾。
SWFUpload有以下特點(diǎn)
* 可以同時(shí)上傳多個(gè)文件；
* 類似AJAX的無刷新上傳；
* 可以顯示上傳進(jìn)度策州；
* 良好的瀏覽器兼容性瘸味；
* 兼容其他JavaScript庫 (例如：jQuery, Prototype等)；
* 支持Flash 8和Flash 9够挂。
配制方法：
需要要引用swfUpload.js
<script type="text/javascript" src="http://www.swfupload.org/swfupload.js"></script>
然后初始化
new SWFUpload({
upload_url: url,
flash_url: 'EmacleUploader.swf',
assume_success_timeout: '10000',
file_size_limit: 300 * 1024,
file_queue_limit: 50,
file_types: "*.*",
file_types_description: "All files",
...
})
3旁仿、文件上傳（采用客戶端上傳插件的方式）
但是泥彤，swfupload不能實(shí)現(xiàn)斷點(diǎn)續(xù)傳锯厢，分片上傳，文件夾上傳等昆咽，我們通過插件實(shí)現(xiàn)了以上swfupload不能實(shí)現(xiàn)的功能办悟。瀏覽器插件時(shí)c++同學(xué)寫的尘奏。我在這里只說一下前端如何獲取瀏覽器插件基本信息以及判斷插件是否加載成功。
因?yàn)閚avigator.plugins只在非ie中生效病蛉，但ActiveX在ie中并不好用炫加，因?yàn)槟阈枰烂總€(gè)插件的唯一標(biāo)識(shí)符，尤其是對(duì)于自己開發(fā)的插件铺然。所以此處生成obj檢查是否包含版本信息來確認(rèn)琢感。
var testUploadPluginDom = jQuery('<object id="testPluginDom" type="application/x-plugin" width="0" height="0"></object>');
jQuery("body").append(testPluginDom);
var pluginVersion = document.getElementById('testPluginDom').version;
if (pluginVersion) {
//console.log("version: " + pluginVersion);
result = true;
} else {
//console.log("client plugin is not load....");
result = false;
}
其中object標(biāo)簽的type屬性值為插件的mime類型
4、文件上傳（采用webuploader.js插件上傳）
然后就是使用很廣泛的FEX的webuploader.js了探熔，可以實(shí)現(xiàn)上傳進(jìn)度、斷點(diǎn)續(xù)傳烘挫、分片上傳诀艰，高級(jí)瀏覽器使用h5上傳，低版本依然采用flash上傳饮六。
用法我就不必多說其垄，請(qǐng)看官方文檔。
5卤橄、移動(dòng)端webapp文件上傳（移動(dòng)端使用webuploader.js有什么問題）
移動(dòng)端用起來的問題還是挺多的绿满。
1、ios9.2（猜測(cè)10以下）上傳的圖片無法獲取文件名窟扑，被自動(dòng)命名為image喇颁；
2、ios上嚎货，如果支持多圖片上傳測(cè)不支持視頻上傳橘霎；
3.android上，不支持多文件上傳殖属。在圖片和視頻文件夾中不可上傳視頻姐叁。
另外，可見移動(dòng)端注意事項(xiàng)。
