背景：项目需要，需要对插件进行二次开发，插件是支持单文件上传，需要开发多文件上传。
思路：
1.修改后台为多文件接收，开发成本大，所以不考虑。
2.前端设置一个总的input：file，且设置multiple，子input：file（插件本身支持的单文件input：file）设置为hidden，当提交时获取选择的文件，获取总input内选择的files，写入一个个隐藏的子input中，之后的事就交给后台了。
结局：失败。
原因：想想也知道啦，如果能通过脚本给input：file赋值，那还有什么安全可言呢？
$('#yes')[0].files=temp;//手动设置input：file的files值
但是input：file的值为一个FileList的对象，我们给赋的不是合法对象，于是报错
那就弄个合法的，还是太天真了，这个对象怎么可能是可以创建的呐？果然。。
创建FileList类对象
这个办法就废了。
3.前端获取选取的file的url写入动态创建的input：text保存到表单里，后台稍微改些，实现提交上传文件。折中办法。获取文件url时，ie成功获取，其他浏览器由于安全机制，获取路径被fakepath替代，无法取得正确路径。
ie：
ie能访问文件url
其他浏览器：
其他浏览器隐藏文件url
这可不能让用户都去用老古董ie。所以window.URL.createObjectURL()闪亮登场！
window.URL.createObjectURL()
URL.createObjectURL()方法会根据传入的参数创建一个指向该参数对象的URL，这个URL的生命仅存在于它被创建的这个文档里，新的对象URL指向执行的File对象或Blob对象。
语法：objcetURL = window.URL.createObjectURL(file || blob);
参数：File对象和Blob对象；File对象就是一个文件，比如我用file type="file"标签来上传文件，那么里面的每个文件都是一个file对象。Blob对象就是二进制数据，比如在XMLHttpRequest里，如果指定requestType为blob，那么得到的返回值也是一个blob对象。
每次调用createObjectURL的时候，一个新的URL对象就被创建了。即使你已经为同一个文件创建过一个URL.，如果你不再需要这个对象，要释放它，需要使用URL.revokeObjectURL()方法.。当页面被关闭，浏览器会自动释放它，但是为了最佳性能和内存使用，当确保不再用得到它的时候,就应该释放它。
临时的一个url
Done！成功！
虽说创建了临时url能本地访问到文件了，但是后续的提交订单查询订单时候这个临时url是无效的，不能访问到文件且这也不是上传文件，于是采用FormData()来装载要上传的文件，后台写好接口上传文件并且返回在服务器上的地址。
使用
FormData装载文件
接收文件信息，上传到服务器上
前台获取到文件在服务器上url之后，存起来给后续修改订单等页面预览文件使用。
最终效果
参考资料：http://m.blog.csdn.net/CGS_______/article/details/74078411
网友评论