就是这样的一个功能，点击加号，出现图片选择，然后选择好以后生成预览。
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. 函数&&变量

    #*- encoding=utf-8 -*import sysprint(sys.getdefaultencoding()) def test(x,y,z): print(x) print(y) pr ...

  2. mysql order by 自定义

    TIMESTAMPDIFF 语法: TIMESTAMPDIFF(interval,datetime_expr1,datetime_expr2). 说明: 返回日期或日期时间表达式datetime_ex ...

  3. SoupUI 结合loadrunner压力测试

    SoupUI 结合loadrunner压力测试 上一篇介绍了SoupUI接口测试,因为工作需要,需要在loadrunner进行websocket的压力测试,当然,SoupUI本身也是可以做性能测试的 ...

  4. re正则常用示例积累

    2019-12-7 import re ''' 示例1: 提取网站的网址 ''' urls = ['https://blog.csdn.net/xxcupid/article/details/5199 ...

  5. Dubbo学习-3-管理控制台搭建

    dubbo 2.6.x 的dubbo-admin管理控制台搭建 1.下载源码:https://github.com/apache/incubator-dubbo-ops 打开后切换到master分支 ...

  6. C++ 得到系统时间

    Time::Time() {//得到系统时间 初始化 time_t t; t=time(NULL); tm *lt; lt=localtime(&t); hour=lt->tm_hour ...

  7. 【HDOJ6681】Rikka with Cake（扫描线，线段树）

    题意:给定一个n*m的平面,有k条垂直或平行的直线,问将平面分成了几个互不联通的部分 n,m<=1e9,k<=1e5 思路: 刻在DNA里的二维数点 #include<bits/st ...

  8. 用ASP实现文件下载

    <% '**************************************************************'**使用方法:                        ...

  9. Gym 100917M Matrix, The

    题目链接: http://codeforces.com/gym/100917/problem/M --------------------------------------------------- ...

  10. 五一清北学堂培训之数据结构（Day 1&Day 2）

    Day 1 前置知识: 二进制 2.基本语法 3.时间复杂度 正片       1.枚举 洛谷P1046陶陶摘苹果  入门题没什么好说的 判断素数:从2枚举到sqrt(n),若出现n的因子,则n是合数 ...