项目笔记上传文件插件的实现

2018-01-04 本文已影响0人 ada456ada

背景：项目需要，需要对插件进行二次开发，插件是支持单文件上传，需要开发多文件上传。

思路：

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()方法.。当页面被关闭，浏览器会自动释放它，但是为了最佳性能和内存使用，当确保不再用得到它的时候,就应该释放它。