因为最近需要做一个功能，使用input上传图片，成功后为图片右上角添加一个删除的按钮，点击按钮则将图片去除并把input内容置空，这个过程中还有一点小坑。

因为是在vue的框架中，因此用一个变量来保存图片的地址，而按钮的显示就根据这个图片地址是否为空字符串来显示，点击删除就直接把这个变量赋值为空字符串就好了。但是需要注意的是清空的input的这个步骤，网络上有不少方法都会引起input标签上绑定事件的丢失，这样下一次上传图片的时候就无法触发change事件了。

总结了一下常用的方法有三种：

1. 设置input的value为空，实际上因为类型为file的input标签的value值并不想文本输入框一样是可以随便设置的，因为安全性的问题这个value实际上是只读的，但是IE11+以上以及chrome等比较新的浏览器是可以把这个value设置为空的。
2. 创建一个新的input标签，来取代之前的。这种方式就会丢失绑定的事件和一些扩展的属性了。
3. 通过form.reset()方法来重置表单。对于没有使用表单提交而是ajax提交，或者为了不影响同一表单内其他的表单控件，可以创建一个form元素，用这个form元素来包裹住目标input，从而实现重置。

function clearInputFile(f){
  if(f.value){
    try{
      f.value = ''; //IE11, latest Chrome/Firefox/Opera...
    } catch(err) { }
    if(f.value){ //IE5 ~ IE10
      var form = document.createElement('form');
      var parentNode = f.parentNode;
      var ref = f.nextSibling;
      form.appendChild(f);
      form.reset();
      parentNode.insertBefore(f,ref);
    }
  }
}