web多图片追加上传兼本地预览

       关于web端图片上传的问题，一般均采用input type=file来上传，添加相关multiple属性，可以一次性上传多张。实际使用中，要求不高的话，这样也可以满足简单的需求。但存在两个问题：一，无本地预览。二，每次选择，会覆盖前次选择的，不可追加选择。公司项目需求，有大量的图片管理，最起码的是就是添加和删除，显然，这样是无法满足需求的。

     于是探索起原理。

      首先每次点击图片浏览按钮，会触发onChange事件，我们可以以此找解决思路。然后就是我们发现，我们选择的文件，存在filelist对象里面。按道理，我们只需动态追加（append） file到 filelist即可，但经过一天的探索，发现存在类型转化问题，怎么都成功不了。然后网上找资料，网上很多例子，把本地图片的预览，添加和删除，做的很好，利用blob类型，和对dom的动态操作，具体自行搜索。但涉及到文件upload这一问题时，都没有解决。甚至有人说动态添加input type=file。但个人觉得，这不是合理的，彻底的解决思路。

       最后，经过一天的研究，换了一种思路，基本彻底解决了本地多文件追加添加，预览，删除，上传问题。基本思路利用formData。写的demo，前端地址如下，后端很简单。

链接: https://pan.baidu.com/s/1BV9yuu_Kb1ab7TIsN8KNXQ 提取码: va9v 复制这段内容后打开百度网盘手机App。如有问题可留言。

写此文章，附源码，效果图如下，以供备忘。