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

所属分类:输入-上传

 19781  151  查看评论 (40)
兼容所有浏览器的多图上传预览(原创) 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,可以上传任何文件,上传图片可以预览,异步上传,使用非常方便
  上传
 23741  77

jQuery h5拖拽多文件上传

可用input控件选择文件,也可以拖拽文件,可以一次上传多个文件,测试需要后台配合,支持失败重传,支持过滤文件类型,文件大小,及同一文件重复上传。
  上传
 33695  148

jQuery多图上传

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

jQuery多图上传带ajax提交

jQuery多图上传可删除,可以本地预览带前台接口
  上传
 31592  169

讨论这个项目(40)回答他人问题或分享插件使用方法奖励jQ币

    易水寒峰 0
    2018/5/20 14:12:25
    怎么一次上传多张图片? 回复
    雪姑七友2564640084 0
    2018/5/18 0:45:00
    IE8 9可以用么,还有能保存到数据库么
        青烟小生0
        2018/5/18 11:04:27
        好像说没问题
    回复
    &如歌 0
    2018/5/17 10:48:22
    我想问这么接收后台传来的图片。没有动原来的图片情况下保存后把原来的图片转回去 回复
    zdl521.cn 0
    2018/5/15 19:45:11
    看着很不错,正好用到 回复
    大甜 0
    2018/4/24 15:40:34
    我获取的源码,为什么在IE下图片显示不出来呢? 回复
    命撙挝沂种 0
    2018/4/20 16:48:51
    cyyylj 0
    2018/4/17 10:05:58
    感觉很不错的样子 回复
    我是古人在找人 0
    2018/4/16 14:07:18
    选择相同图片问题 回复
    时光滥好人… 0
    2018/4/13 19:00:46
    上传图片转成base64后ie8显示不出来,有没有好的办法解决啊 回复
    °Honey 浅丶浅 0
    2018/4/13 10:34:32
    看效果,是我需要的
        青烟小生0
        2018/5/18 11:01:42
        有点小BUG的
    回复
取消回复