Question

关于input type=file 的一些实践

Answer 1

这阵子做了一个后台管理素材的功能，上传素材需要缩略图+素材文件。 所以避免不了使用input type="file"

我们都知道，file上传文件时可以限制文件类型：accept这个属性；但是只在FF和chrome中有效。

这里主要讲一下 更新素材 的一些操作（界面大致是这样）：

当用户点击更新素材的时候，界面应该让用户知道自己更新的是哪一个素材，所以后端把素材的缩略图、素材名、素材文件名都返回给前端，这是前端酌情进行赋值。

看Dom元素可以看出，我的做法是用div模拟出原素材文件的缩略图，但input file是没法赋值的（原因如下），所以更新素材时候前端与后端达成共识，如果input的值为空，就不传这个input值的字段给后端，素材缩略图就没有修改。

来看看具体操作：

然后再监听一下input变化，调用这个方法：

原以为美滋滋的解决了需求，但是又发现一个问题：
  当file选择文件弹窗出现之后，用户点击取消，input 的值就被清空了。那么问题就来了，如果用户一开始选中了一个文件，接下来用户再次点击上传文件的时候，手抖点击了取消，原本input的值就被清空了... my god！
  一阵沉思，input这个值我不能动态修改... 我又不能把之前用户传的值清空... 对 定义一个变量储存旧的值，说干就干

就搞定了~

清空file值方法：
var file = doucment.getElementById('file');