web前端上传图片+预览

上传图片或者文件我们都清楚，需要用到 input[type = file] 标签，然后我们在js中通过选择器获取上传的文件数组，即可获得文件并提交给后台。

想要做到图片预览，就需要获取可读取到该图片文件的临时url，js中windows对象提供了接口：

 1 function  getObjectURL(file) {
 2     var url = null ;
 3     if (window.createObjectURL!=undefined) { // basic
 4         url = window.createObjectURL(file) ;
 5     } else if (window.URL!=undefined) { // mozilla(firefox)
 6     url = window.URL.createObjectURL(file) ;
 7     } else if (window.webkitURL!=undefined) { // webkit or chrome
 8     url = window.webkitURL.createObjectURL(file) ;
 9     }
10     return url ;
11 },    

获取到url之后，通过js事件动态添加到预览区img标签的url属性中即可成功预览。

当然往往我们不仅需要预览，还有关于预览图片的一系列操作，比如删除、添加新的图片等等，这些操作看起来复杂，但是核心还是要把控好上传的文件数组files[]和对应的url数组urls[]，依据自己的功能需要，改变这两个数组，再配合html元素的动态渲染，只要肯花时间，实现一个功能完善的图片上传+预览组件，不是什么难事。

实际开发不必学习阶段，往往需要节省开发时间，这里可以推荐使用UI框架，比如bootstrap、element-ui等。

这里有篇关于bootstrap文件上传组件bootstrap fileinput的介绍：https://zhuanlan.zhihu.com/p/23908279

---

 

发布时间：2019-05-22 17:58:21

---

与标题毫无关系的瞎扯

学技术之余补点英语：

 complete和 finished 都有形容词属性，似乎都有"完成的"的意思，但它们的差异其实是天差地别的。

下面我用了三个例句说明complete 和 finished 都该怎么用，大家可以总结一下用法，回复在评论区：

笔记（正确译法）：

When you marry the right woman, you are complete.

娶对老婆，一辈子成功。

When you marry the wrong woman, you are finished.

娶错老婆，一辈子完了。

When the right one catches you with the wrong one, you are completely finished.

当老婆抓到你和小三，你就彻底完了。

转载于:https://www.cnblogs.com/linktodream/p/10907575.html