就是这样的一个功能，点击加号，出现图片选择，然后选择好以后生成预览。
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. 揭示编译器API

    编译器管道功能区 .NET编译器平台(“Roslyn”)通过提供一个API层,是一个传统编译器管道镜像,向你这样的消费者揭示了C#和Visual Basic编译器的代码分析. 这条管道的每一部分,现在 ...

  2. Linux中的sshd服务

    Linux中的sshd服务,主要用于pst终端,远程连接到linux服务中 看sshd服务状态 service sshd status 停止sshd服务 service sshd stop 启动ssh ...

  3. R语言 Keras Training Flags

    在需要经常进行调参的情况下,可以使用 Training Flags 来快速变换参数,比起直接修改模型参数来得快而且不易出错. https://tensorflow.rstudio.com/tools/ ...

  4. 永久禁用Win10驱动程序强制签名

    1.在开始按钮点击右键,选择“命令提示符(管理员)” 2.执行以下命令(复制后,在命令提示符中单击鼠标右键即可完成粘贴,然后按回车键执行): bcdedit.exe /set nointegrityc ...

  5. python 全栈开发，Day45（html介绍和head标签，body标签中相关标签）

    一.html介绍 1.web标准 web准备介绍: w3c:万维网联盟组织,用来指定web标准的机构(组织) web标准:制作网页遵循的规范 web准备规范的分类:结构标准.表现标准.行为标准. 结构 ...

  6. Cluster基础(五)：配置tracker、配置storage、文件测试及web访问

    一.配置tracker 目标: FastDFS是一个分布式文件系统,主要的服务器角色有Tracker和Storage.本例安装一台Tracker,实现以下功能: 接受客户端的访问 检索存储节点,为客户 ...

  7. git 代码强行提交

    git add . git commit -m "your comment" git push -u origin master -f

  8. PHP读取XML文件数据获取节点值

    最近在接入渠道的时候遇到接口返回是xml数据.现在接口数据返回json数据格式比较常见. 如何获取xml里面真正数据? 对象结果集合单个值的强制转换处理.(直接代码说明) demo示例:  创建xml ...

  9. sql常用 语句总结

    一,插入一个新字段:ALTER TABLE +表名+ADD  COLUMN(字段名+ 类型) sql1 = 'ALTER TABLE klkl_4s_shop ADD COLUMN (name_rea ...

  10. MySQL 基准测试

    这是<高性能 MySQL(第三版)>第二章的读书笔记. 基准测试(benchmark)是针对系统的压力测试,用于掌握系统行为或重新系统的某个状态.sysbench 是常用的 MySQL 基 ...