前端上传实现

---

项目中涉及到的上传
项目中涉及到需要上传文件的需求很多，简单的有上传用户头像，复杂一些的有文件管理系统中的文件上传，可以做到断点续传，分片上传，大文件上传，上传文件夹等功能。
1、用户头像上传或证书上传（form+iframe）
首先来说说头像上传，几乎所有需要用户登录的网站都需要支持用户上传头像。我做的项目需要兼容低级浏览器，所以通过form+iframe这种简单的方式来实现。

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

接着，我需要获取接口的返回值进行下一步操作。  

$('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上传）
项目最早使用的是SWFUpload上传，SWFUpload是一个客户端文件上传工具，它通过整合Flash与JavaScript技术为WEB开发者提供了一个具有丰富功能继而超越传统<input type="file" />标签的文件上传模式。
SWFUpload有以下特点
* 可以同时上传多个文件；
* 类似AJAX的无刷新上传；
* 可以显示上传进度；
* 良好的浏览器兼容性；
* 兼容其他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不能实现断点续传，分片上传，文件夹上传等，我们通过插件实现了以上swfupload不能实现的功能。浏览器插件时c++同学写的。我在这里只说一下前端如何获取浏览器插件基本信息以及判断插件是否加载成功。
因为navigator.plugins只在非ie中生效，但ActiveX在ie中并不好用，因为你需要知道每个插件的唯一标识符，尤其是对于自己开发的插件。所以此处生成obj检查是否包含版本信息来确认。

    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标签的type属性值为插件的mime类型
4、文件上传（采用webuploader.js插件上传）
然后就是使用很广泛的FEX的webuploader.js了，可以实现上传进度、断点续传、分片上传，高级浏览器使用h5上传，低版本依然采用flash上传。
用法我就不必多说，请看官方文档。
5、移动端webapp文件上传（移动端使用webuploader.js有什么问题）
移动端用起来的问题还是挺多的。
1、ios9.2（猜测10以下）上传的图片无法获取文件名，被自动命名为image；
2、ios上，如果支持多图片上传测不支持视频上传；
3.android上，不支持多文件上传。在图片和视频文件夹中不可上传视频。
另外，可见移动端注意事项。