zoukankan      html  css  js  c++  java
  • jquery+html实现前端的上传图片预览

     
     
    就是这样的一个功能,点击加号,出现图片选择,然后选择好以后生成预览。
    jquery+html实现前端的上传图片预览
    input那么丑,UI看不惯,一定要改成加号
    我就用了fa的图标,外部套一个bootstrap4中的class:border,设置一下内边距,看起来差不多居中了,好了
    input最简单的方式隐藏
    jquery+html实现前端的上传图片预览

     

    然后就是js的实现:
    jquery+html实现前端的上传图片预览

    然后,华丽丽的bug就出现了,看到我添加的this.value了吧,因为上传一张,是好的,上传第二张,预览出现两张第二张,上传第三张,预览就出现三张第三张.....添加了this.value以后就好了,但是F12看后台会报错,Uncaught TypeError: Failed to execute 'createObjectURL' on 'URL'........
    查呢也没查出什么解决方法
     
    一直就在纠结createObjectURL这个方法,甚至去官网看例子
    其实报错的根源就是我瞎添加的this.value
     
    那就删了,重新寻找图片重复显示的问题所在吧
    最后突然意识到,是change方法引起的
     
    change方法的问题,那就回到input隐藏以后的调用上
    然后就被我真的找到了,用《label》,简直完美
    在最难的IE10上都测试通过了
     
    完整的代码:
    jquery+html实现前端的上传图片预览

    jquery+html实现前端的上传图片预览

     
  • 相关阅读:
    移动网络优化
    移动网络架构与数据传输
    移动网络简介与RRC
    CSS之外边距折叠
    网络协议之TLS
    Smarty 模板引擎简介
    FormData介绍
    相对路径与绝对路径
    OAuth2.0
    Redis学习手册(List数据类型)
  • 原文地址:https://www.cnblogs.com/liliuguang/p/11269643.html
Copyright © 2011-2022 走看看