jquery+html实现前端的上传图片预览

Posted 2022-05-28 liliuguang

 

 

 

就是这样的一个功能，点击加号，出现图片选择，然后选择好以后生成预览。

input那么丑，UI看不惯，一定要改成加号

我就用了fa的图标，外部套一个bootstrap4中的class：border，设置一下内边距，看起来差不多居中了，好了

input最简单的方式隐藏

 

然后就是js的实现：

然后，华丽丽的bug就出现了，看到我添加的this.value了吧，因为上传一张，是好的，上传第二张，预览出现两张第二张，上传第三张，预览就出现三张第三张.....添加了this.value以后就好了，但是F12看后台会报错，Uncaught TypeError: Failed to execute ‘createObjectURL‘ on ‘URL‘........

查呢也没查出什么解决方法

 

一直就在纠结createObjectURL这个方法，甚至去官网看例子

其实报错的根源就是我瞎添加的this.value

 

那就删了，重新寻找图片重复显示的问题所在吧

最后突然意识到，是change方法引起的

 

change方法的问题，那就回到input隐藏以后的调用上

然后就被我真的找到了，用《label》，简直完美

在最难的IE10上都测试通过了

 

完整的代码：