jQuery多图上传及返显预览(原创)

所属分类:输入-上传

 2241  10  查看评论 (4)
分享到微信朋友圈
X
jQuery多图上传及返显预览(原创) ie兼容9

更新时间:2021-03-06 00:43:49

更新说明:修改了从最后删除图片时添加图标消失的BUG,修改了单独上传时,图片数变量必须在外部定义,增加了单独的,上传、预览、修改示例


更新时间:2021-02-28 23:22:19

插件特点:

 1、插件做了IE9 兼容,预览方面用了滤镜 .style.filter,上传方面没用Flash 自己想的一个办法,克隆

<input type="file" />

赋值完一个克隆一个,这样动态生成input标签

 2、图片能点击放大预览,并且可左右切换,样式也很简单,可自定义,替换掉图片icon即可,index.html里面有很清楚的说明和演示,有大量的注释 ,比源代码都多。 

使用说明:

以图片返显为例

 1、html 部分:    

 <div id="showImgs"></div>

2、js 部分:      

var gbOption, ispre; //定义全局变量      
setTimeout(function() { //等待其他JS加载完       
    var imgObj = ['./aaa.jpg', './bbb.jpg', './ccc.jpg'] //模拟数据来源            
    gbOption = ispre = new imgPre(imgObj, true); //主要步骤1            
    createPreDiv(); //主要步骤2     
}, 0)
相关插件-上传

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

兼容所有浏览器的多图上传预览兼容IE 789.在一个界面上展示到固定标签业务场景:答题添加图片匹配题目一个选项一个题目
  上传
 68688  538

jQuery图片上传,带剪切功能

jQuery图片上传,适用移动端,带剪切功能,支持手势调节图片大小
  上传
 32110  295

jQuery移动端多图上传(带裁剪功能)

适应于手机端上传图片的功能,附带上传图片裁剪功能
  上传
 32189  318

html5 头像上传更换插件

html5 头像上传、更换、剪切插件
  上传
 160048  1245

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

    阳光宅男 0
    2021/3/21 10:06:36
    已经上传的图片怎么删除
        zzcxx1
        2021/3/22 22:52:48
        图片上传后会自动存在数组里的, 点击删除图标后, 数组里面也会自动删除,这个不用关心,只需要最后取数组的值就OK
    回复
    木星航 0
    2021/3/1 17:51:11

    插件很有用,继续支持

    回复
    zzcxx 0
    2021/3/1 11:41:36
    大家有啥问题可以在下面提出! 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复