美文网首页
使用input[type=file]遇上的一些问题

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

作者: 刘圣凯 | 来源:发表于2018-04-08 15:47 被阅读0次

    项目遇到一个需要,如下


    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。

    相关文章

      网友评论

          本文标题:使用input[type=file]遇上的一些问题

          本文链接:https://www.haomeiwen.com/subject/smgphftx.html