使用input[type=file]遇上的一些问题

项目遇到一个需要，如下

image.png

功能大致就是添加图片，展示出来，然后在用户点击提交的时候把图片传给后台，在和后台交涉之后，决定在用户选择图片之后转成formdata传给后台，后台返回一个url，提交的时候将url返回给后台

      /**转formdata */
      var formdata = new FormData();
      formdata.append("file1", $("#pic")[0].files[0]);

首先遇到的问题是事件绑定，我开始使用了点击事件 click ，不过在图片没有转成fromdata参数的时候ajax就已经异步发送出去了，这时候页面error 500， 后来改成了 change 事件，当 input 发生改变的时候触发，此时改变的是 input.value (此时的 input.value 是该图片的地址)，所以如果上传同一张图片，就不会触发该事件，不过因为在删除按钮事件上忽略了value，造成了如果图片a上传之后删除然后再次上传图片a不会触发 change 事件，最后找到原因， 在删除之后同时清空 input.value 的值，解决了bug。