就是这样的一个功能，点击加号，出现图片选择，然后选择好以后生成预览。
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. 02.action--新增精灵知识点

    import cocos from cocos.actions import * class HelloWorld(cocos.layer.ColorLayer): # ColorLayer子类化为具 ...

  2. vue子传父、父传子

    子传父 vue子传父使用$emit传值 子组件: <template> <div> <button @click="toParent">点击传到 ...

  3. elememt-ui 的 el-icon-iconName 图标 显示问题！

    今天想在按钮处添加一个图标,但是显示不出.自己找了半天,终于找到了,希望帮到大家! 1,首先是没有报错的,但是有警告⚠ 意思是说什么拦截了之类的问题,但是到底是哪里问题导致拦截了呢?找了好久,原来是我 ...

  4. oppo面试题

    1.synchronized和Lock有什么区别?哪个可重入?哪个效率高? synchronized和Lock都用于线程同步的场景中. synchronized是jdk的关键字,用来构造同步代码块或者 ...

  5. gawk进阶

    一.使用变量 gawk支持两种不同类型的变量: 内建变量 自定义变量 1.1 内建变量 ①字段和记录分隔符变量 FIELDWIDTHS:有空格分割的一列数字,定义了每个数据字段确切宽度 FS:输入字段 ...

  6. Mac终端的Cocoapods创建自己的私有库和公有库

    一,前言 为什么要用Cocopods 通常在开发的过程中,大多时候,我们会处理一类相同的操作,比如对于字符串String的邮箱验证,是否为空,手机号验证,或者一些UIView的动画操作,我们为了避免写 ...

  7. 【2019 Multi-University Training Contest 5】

    01: 02:https://www.cnblogs.com/myx12345/p/11649221.html 03: 04:https://www.cnblogs.com/myx12345/p/11 ...

  8. 简单Spring整合JdbcTemplate

    实体类: public class User implements Serializable{ private Integer id; private String username; private ...

  9. sqlalchemy.exc.NoForeignKeysError：Can't find any foreign key relationships between

    这句话的意思是,两张表之间的外键找不到,首先看看外键设置正确了没,如果外键没问题,看看是不是_tablename_设置了没,就是再model中,定义类的时候,表格名称要_tablename_设置一下, ...

  10. scrapy抓取企业名录

    我们要用scrapy抓取企业名录网站的企业信息,并且保存在mysql数据库中,数据大概是22万条,我们用scrapy抓取. 第一步,现在item中定义好要抓取的字段 import scrapy cla ...