就是这样的一个功能，点击加号，出现图片选择，然后选择好以后生成预览。
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上都测试通过了
 
完整的代码：

 

jquery+html实现前端的上传图片预览的更多相关文章

  1. 通过HTML5 FileReader实现上传图片预览功能

    原文:http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201706224590.html 在上传图片到服务器之前,我们希望可以预览一下要上传的图片. ...

  2. jquery实现上传图片预览(需要浏览器支持html5)

    jquery实现上传图片预览(需要浏览器支持html5) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...

  3. HTML5上传图片预览

    <!DOCTYPE html> <html> <head> <title>HTML5上传图片预览</title> <meta http ...

  4. HTML5上传图片预览功能

    HTML5上传图片预览功能 HTML代码如下: <!-- date: 2018-04-27 14:41:35 author: 王召波 descride: HTML5上传图片预览功能 --> ...

  5. 前端实现在线预览pdf、docx、xls、ppt等文件

    思路:前台将各种格式的附件上传到服务器----后台通过方法将这些格式的文件转化成图片,前台通过放映ppt的方式将其展示在页面上. 关键点:reveal.js 参考文章:https://www.awes ...

  6. jQuery+HTML5实现上传文件预览

    <!DOCTYPE html> <html> <head> <title>HTML5上传图片预览</title> <meta http ...

  7. JS 上传图片 + 预览功能（一）

    JS 上传图片 + 预览功能 <body> <input type="file" id="fileimg1" style="disp ...

  8. js兼容火狐显示上传图片预览效果

    js兼容火狐显示上传图片预览效果[谷歌也适用] <!doctype html> <html> <head> <meta content="text/ ...

  9. 去除ckeditor上传图片预览中的英文字母

    去除ckeditor上传图片预览中的英文字母 CKEDITOR.replace('text', { filebrowserImageUploadUrl : 'upload_img.do', langu ...

随机推荐

  1. Docker之安装缺省指令

    Docker 中有些指令不存在,需要额外的安装,这里做下安装记录. 更新软件源中的所有软件列表 apt-get update 安装 ifconfig apt install net-tools 安装 ...

  2. js格式化数字或者小数，加入千分符（此次为”，“）

    function npChangeNum(num) { var tag = (num || 0).toString().split("."); tag[0] = tag[0].re ...

  3. 一个能极大提高生产率的Chrome新建标签页扩展

    我是一个对开发生产率有着BT需求的程序员,总是追求将自己的单位时间生产率最大化. 通过分析,我发现自己一天会反反复复使用Chrome的新建标签,然后访问常用的网站.因此,我期望新建一个默认的Chrom ...

  4. Jenkines邮件中添加图片

    1.在Jenkins的邮件插件 Email-ext中的Default Content内容编写html文件,简单模板如下: <html>  <head>  </head&g ...

  5. 包装CGFloat和用NSNumber初始化的区别？

    @(CGFloat)和[NSNumber numberWith:CGFloat]的区别?

  6. [CSP-S模拟测试]:Walk（树的直径+数学）

    题目描述 给定一棵$n$个节点的树,每条边的长度为$1$,同时有一个权值$w$.定义一条路径的权值为路径上所有边的权值的最大公约数.现在对于任意$i\in [1,n]$,求树上所有长度为$i$的简单路 ...

  7. [CSP-S模拟测试]:天才绅士少女助手克里斯蒂娜（数学+树状数组）

    题目描述 红莉栖想要弄清楚楼下天王寺大叔的显像管电视对“电话微波炉(暂定)”的影响. 选取显像管的任意一个平面,一开始平面内有个$n$电子,初始速度分别为$v_i$,定义飘升系数为$$\sum \li ...

  8. jpa remove

    直接使用em.remove会报错,IllegalArgumentException: Removing a detached instance 即对象处于脱管的状态,使用merge使之被session ...

  9. laravel的使用

    1.先下载composer.phar 下载地址:https://getcomposer.org/download/ 把composer.phar拷贝到自己的项目目录中,执行以下代码: php comp ...

  10. p5471 [NOI2019]弹跳

    分析 代码 #include<bits/stdc++.h> using namespace std; #define fi first #define se second #define ...