就是这样的一个功能，点击加号，出现图片选择，然后选择好以后生成预览。
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. bzoj4128 Matrix 矩阵 BSGS

    题目传送门 https://lydsy.com/JudgeOnline/problem.php?id=4128 题解 想了十分钟没有任何思路. 然后一眼瞥见一句话"数据保证在 \(p\) 内 ...

  2. Spring中都用到了哪些设计模式

    JDK 中用到了那些设计模式?Spring 中用到了那些设计模式?这两个问题,在面试中比较常见.我在网上搜索了一下关于 Spring 中设计模式的讲解几乎都是千篇一律,而且大部分都年代久远.所以,花了 ...

  3. [CH5E02] A Little Shop of Flowers

    问题描述 You want to arrange the window of your flower shop in a most pleasant way. You have F bunches o ...

  4. LeetCode--040--组合总和 II(java)

    给定一个数组 candidates 和一个目标数 target ,找出 candidates 中所有可以使数字和为 target 的组合. candidates 中的每个数字在每个组合中只能使用一次. ...

  5. IO流之RandomAccessFile和File

    通过学习一些经典案例来复习基础 ------------------------------------------------------------------------------------ ...

  6. SpringCLoud之搭建Zuul网关集群

    1.使用技术 Springboot,SpringCloud,Zuul,Nignx 2.目的 使用Zuul搭建微服务高可用的网关 3.项目创建 3.1 创建注册中心(略) 3.2 创建一个hello-s ...

  7. PB TB级数据

    Byte.KB.MB.GB.TB.PB.EB.ZB.YB. 1KB=1000B1MB=1000KB1GB=1000MB1TB=1000GB 1TB=240B=1024MB 1PB=250B k M G ...

  8. Spring源码解读--（一）源码下载

    走在Java程序员这条路上,网上Java各种工具满天飞,写个简单的CRUD,相信是个开发都能写出来,于是在思考如何可以在同行业中更有竞争力(其实就是如何赚更多钱).那么,老大给我推荐了Spring源码 ...

  9. 纯文本编辑语言markdown

    Markdown的主要目的是生成可以复制到网页或写入平台的HTML代码.但你不必那样使用它.Markdown也可以作为强大记笔记的基础,许多Markdown编辑可以将您的写作导出为其他格式,如Word ...

  10. 【自动化测试】WebDriver使用

    from selenium import webdriver from selenium.webdriver.common.keys import Keys from bs4 import Beaut ...