图片上传实时展示

最近在做文件上传的需求,用到了一些IPA,研究了一下,感觉还挺有用的,主要解决了:图片上传到服务器后就可以立即展示在前端的页面,而不需要等上传成功之后,再拿回传的URL去请求。因为图片小的话还好说,如果图片很大的话,那就要等很长时间了!
一、URL.createObjectURL
  URL.createObjectURL()方法会根据传入的参数创建一个指向该参数对象的URL。
  这个URL的生命仅存在于它被创建的这个文档里,新的对象URL指向执行的File对象或者是Blob对象。

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

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

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

二、URL.revokeObjectURL

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

语法:
    window.URL.revokeObjectURL(objectURL);

三、实例:预览选择的图片

  
  
  
  
预览选择的图片  
  
  
    
  

你可能感兴趣的:(图片上传实时展示)