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

所属分类:输入-上传

兼容所有浏览器的多图上传预览(原创) 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,也可以用自己的图片

相关插件-上传

jQuery多图上传插件imgUp.js

可以多图的上传,预览,并带删除功能
  上传
 49751  436

jQuery仿淘宝管理商品批量图片上传插件

jQuery淘宝上传商品图片代码,批量上传插件,(不兼容IE6,7,8)
  上传
 21127  64

jQuery多图上传带ajax提交

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

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

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

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

    ┼季樱花╇落雨殇 0
    2018/2/23 10:06:41
    感觉很不错的样子~~
    回复
    风起时的拥抱 0
    2018/2/8 9:59:17
    可以的,用起来很方便
    回复
    将心比心 0
    2018/2/6 10:49:16
    我需要jq币,没法下载你的资源啊~~~~
        落尽红樱君不见0
        2018/2/11 10:44:11
        连续签到三天以上会有jq的,不能断
    回复
    森女范_er 0
    2018/2/5 14:20:56

    看着还挺好用的,下载试试

    回复

    出彩,因?有剪裁 0
    2018/2/4 20:16:34
    此生,有你足矣 0
    2018/2/2 16:02:45

    测评案例正在审核哦,一个很实用的测评案例,用到此多图上传预览插件,大家留心哦~

    回复
    microsoftvs 0
    2018/1/30 14:04:41

    ie10以下测试,点击图片后还是报错的。SCRIPT5: 拒绝访问

        此生,有你足矣0
        2018/1/30 16:43:59

        亲,最新版本没有此问题哦

    回复
    微言 0
    2018/1/30 0:52:25
    qzuser 0
    2018/1/29 17:51:20
    JoviChin 0
    2018/1/29 17:47:20

    应该可以优化成,选择一张图,即出来下一个上传,配置可选最大上传图片数,然后可多图上传

        此生,有你足矣0
        2018/1/30 18:37:56

        应用场景不一样,等我发布一个测评模板出来就知道用处了

    回复
取消回复