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

所属分类:输入-上传

 25637  169  查看评论 (52)
兼容所有浏览器的多图上传预览(原创) 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头像上传剪裁插件cropper

cropper是一款使用简单且功能强大的图片剪裁jQuery插件
  上传
 53864  367

图片预览上传插件bootstrap-fileinput.js

bootstrapfileinput预览上传图片并使用FmData上传,上传url根据实际情况填写
  上传
 37512  151

webuploader 上传插件(根据官方做了小改)

webuploader上传插件,上图之前图片可编辑、可随意排版上传图片顺序
  上传
 30505  126

pc端图片批量上传,可拖动图片交换位置

jQuery可批量上传图片 可以拖动交换位置 可删除
  上传
 24771  92

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

    pangyicong 0
    2018/7/15 10:21:58
    这是我想要的,但还想加入一个属性,譬如每个图片带一些属性 回复
    悠游天下 0
    2018/7/10 17:25:16
    不知道支持移动端不
        Sober'M0
        2018/7/13 15:48:25
        这就是表单提交应该是支持de
    回复
    gouqilin 0
    2018/7/7 13:05:33
    感觉还是不错的 回复
    ?(?想你?)? 0
    2018/6/21 10:10:52
    个数可以随意改变吗
        悠游天下0
        2018/7/10 17:27:47
        应该可以的看前台
    回复
    朱明川 0
    2018/6/9 14:08:24
    图片上传原理是什么 回复
    暗影☆?蝶 0
    2018/6/4 14:46:35

    说好的兼容  ie 6 7 8 呢  

    回复
    暗影☆?蝶 0
    2018/6/4 13:57:34
    我怎么控制图片大小 回复
    易水寒峰 0
    2018/5/20 14:12:25
    怎么一次上传多张图片?
        God‘kiss0
        2018/7/23 9:22:28
        这个事单独上传的
    回复
    雪姑七友2564640084 0
    2018/5/18 0:45:00
    IE8 9可以用么,还有能保存到数据库么
        青烟小生0
        2018/5/18 11:04:27
        好像说没问题
        ……?0
        2018/6/28 16:35:05
        上面说的是没问题
    回复
    &如歌 0
    2018/5/17 10:48:22
    我想问这么接收后台传来的图片。没有动原来的图片情况下保存后把原来的图片转回去 回复
取消回复