兼容所有浏览器的多图上传预览(原创)

所属分类:输入-上传

 75933  575  查看评论 (105)
分享到微信朋友圈
X
兼容所有浏览器的多图上传预览(原创) ie兼容6

更新时间:2018/1/30 下午2:12:52

更新说明:修正IE 10 的无关提醒bug,去掉一些无关的css样式,去掉之前的js


更新时间:2018/1/30 下午1:21:04

更新说明:

1. 兼容IE6,7,8,9 浏览器,虽然也挺讨厌,但是为了需求吧.

2. 为了避免用户显示图片不正常,取消icon-font,改用img代替.

3. 有bug 希望大家多多提醒.

最后希望大家关注我,后续我会出一个很实用测评的界面,是这个实例的一个应用,希望大家喜欢


使用方法

发布时间:2018-1-28 21:20

1.搭建一个图片上传的模块

<div class="item">
      <svg class="icon addImg" aria-hidden="true">
          <use xlink:href="#icon-tianjiatupian"></use>
      </svg>
      <input name="url" type="file" class="upload_input" onchange="preview(this)"/>
      <div class="preview"></div>
      <div class="click" onclick="loadImg(this)"></div>
      <div class="delete" onclick="deleteImg(this)">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-shanchu4"></use>
        </svg>
      </div>
 </div>

2.写入图片预览js

function preview(file) {
  var prevDiv = $(file).parent().find('.preview');
  if (file.files && file.files[0]) {
    var reader = new FileReader();
    reader.onload = function(evt) {
      prevDiv.html('<img src="' + evt.target.result + '" />');
    }
    reader.readAsDataURL(file.files[0]);
  } else {//IE
    prevDiv.html('<div class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + file.value + '\'"></div>');
  }
  $(file).parent().find('.delete').show();
}

3.上面的图片展示不出来是因为我用的icon-font,也可以用自己的图片

相关插件-上传

支持IE8的多文件、多图异步上传并能预览的插件

该插件是基于百度webuploader的一个插件,支持IE8,可以上传任何文件,上传图片可以预览,异步上传,使用非常方便
  上传
 63734  361

基于HTML5的jquery文件上传插件

这个插件是照着uploadify的api文档写的
  上传
 290785  624

jQuery多图上传

jQuery多图图片上传.net后端以写好,直接使用
  上传
 79364  464

zyupload图片上传修改版V2.0

在原zyupload基础上增加了放大,删除,目录选择功能 。同时修改了原作者中的删除图片后该图片不能再次上传的BUG
  上传
 54091  374

讨论这个项目(105)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    插件客服-小鸟 0
    2021/6/28 16:28:56
    上传好之后
    回头要编辑,原来的位置,怎么显示已有图片和删除按钮 回复
    我们都是好朋友 0
    2021/1/7 15:38:35
    IE9上传有问题啊
        我们都是好朋友0
        2021/1/15 16:41:14
        看看你的dom节点有没有正确
    回复
    隰有游龙 0
    2020/10/30 15:15:07
    谷歌浏览器下有border ie没有什么情况, 回复
    绝对 0
    2019/9/12 9:34:03
    还有个问题怎么把这些图片上传到后台
        灭霸媳妇0
        2019/9/12 10:19:30
        将pic.attr("src",reallocalpath);值通过ajax传送给后台,后在在将base64转转换为图片保存。
    回复
    绝对 0
    2019/9/12 9:33:17
    这个怎么限制上传的图片不超过2000k啊
        灭霸媳妇0
        2019/9/12 9:41:10
        对上传的图片进行大小判断,可参考http://www.jq22.com/web-skill43
    回复
    home 0
    2019/8/26 14:07:37
    这个他是自动上传嘛 回复
    jinjiahao 0
    2019/8/18 14:20:43
    有个项目刚好是IE7,想用这个试一下。 回复
    大圆脸?? 0
    2019/5/16 10:49:54
    努力当小白 0
    2019/5/9 16:45:57
    夏天不会老去 0
    2019/4/2 16:36:52
    这个也算多图上传吗?不能多选不说,这么多加号看着都看花!差评!
        大圆脸??0
        2019/5/16 10:49:13
        看着不是很好用
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复