createObjectURL方法 实现本地图片预览

前言：在XMLHttpRequest Level 2添加了一个新的接口FormData。利用FormData对象，我们可以通过JavaScript用一些键值对来模拟一系列表单控件,我们还可以使用XMLHttpRequest的send()方法来异步的提交这个"表单"。比起普通的ajax,使用FormData的最大优点就是我们可以异步上传一个二进制文件。

下面的代码将创建一个空的FormData对象：

varformData=newFormData()

你可以使用FormData.append来添加键/值对到表单里面

formData.append('username','Chris');

在工作中有一个小的功能就是图片上传，通过模拟一个图片上传控件。如下图：

刚开始做的时候，需求是上传一张图片，这样好做，通过对该input绑定change事件，然后获取该input的files的值（不是通过该input的value获取）。然后通过ajax将该oFormdata上传到接口就可以了，如下图：

但是这样会出现一个问题，每次只能上传一张图片，重新添加照片的时候会覆盖前面所选的图片。

我们可以给input增加一个multiple属性，这样可以选择多张图片，然后通过length属性获取files的长度，循环给formdata对象添加，然后通过ajax进行上传。

如果用户想更换或者删除所选中的图片呢？那我们可以将选中的files列表推进一个数组中，这样我们就可以很好的进行控制。

之前的图片预览都是在上传阿里云成功后会返回一个图片的url地址，这样在成功的回调后我可以给该位置的背景图片的url赋值，但是现在要求的是先预览图片，在用户选择后再进行提交。

所以引出了window.URL.createObjectURL，URL.createObjectURL()方法会根据传入的参数创建一个指向该参数对象的URL. 这个URL的生命仅存在于它被创建的这个文档里. 新的对象URL指向执行的File对象或者是Blob对象.

语法: objectURL = URL.createObjectURL(blob || file);

参数:

File对象或者Blob对象

这里大概说下File对象和Blob对象:

File对象,就是一个文件,比如我用input type="file"标签来上传文件,那么里面的每个文件都是一个File对象.

Blob对象,就是二进制数据,比如通过new Blob()创建的对象就是Blob对象.又比如,在XMLHttpRequest里,如果指定responseType为blob,那么得到的返回值也是一个blob对象.

注意点:

每次调用createObjectURL的时候,一个新的URL对象就被创建了.即使你已经为同一个文件创建过一个URL. 如果你不再需要这个对象,要释放它,需要使用URL.revokeObjectURL()方法. 当页面被关闭,浏览器会自动释放它,但是为了最佳性能和内存使用,当确保不再用得到它的时候,就应该释放它.

所以可以对每个files生成一个本地的url，然后给每个图片的占位背景设置该url，这样就可以实现本地预览了，如果要对上传的files进行增删改查，那么可以对存储该所有files的数组进行管理。

注：该方法不支持低版本浏览器。