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

所属分类:输入-上传

 16836  65  查看评论 (16)
分享到微信朋友圈
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)
相关插件-上传

jQuery图片上传预览支持拖拽

上传单个图片,同时支持将图片拖拽在框中
  上传
 66013  421

jQuery多图上传

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

html5文件上传插件Pure HTML5 file upload

html5文件上传插件Pure HTML5 file upload
  上传
 82097  381

zyupload图片上传修改版

在原zyupload基础上增加了放大,删除,目录选择功能 。上传的图片可以轮播查看, 上传图片有拖拽图片和文件功能
  上传
 60706  382

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

    After all... 0
    2022/7/19 10:54:07
    您好,我想请教一下要实现多个上传框,需要修改些什么?😵 回复
    流年回忆 0
    2022/3/1 15:56:37
    filesArr传到后端是空的,这是什么原因来的? 回复
    北港不夏 0
    2021/10/18 10:12:53
    你好,我想问下var imgObj2 = [];这里面放的是那些上传的图片名吗
        zzcxx0
        2021/10/18 18:05:22
        是的,数组里放图片的路径字符串集合
    回复
    大大大悟空。 0
    2021/9/23 10:31:00
    怎么清空待上传的图片? 回复
    插件客服-小鸟 0
    2021/6/28 16:45:14
    能否反显加个删除功能 回复
    Kadima 0
    2021/5/20 9:41:12
    视频上传不了的吗?
        zzcxx0
        2021/6/1 9:38:12
        上传的ajax自己自由发挥呗,这个是自动帮助你获得文件的 files 数据集合,还有UI交互等
    回复
    ? 0
    2021/5/15 11:24:28
    大佬,ajax提交到后台成功后,怎么一次性清空图片和file数组
        zzcxx1
        2021/5/18 17:12:44
        提交完 直接赋值 装图片的数组为 [] 就行
        ?0
        2021/7/7 18:07:44
        谢谢
    回复
    ? 0
    2021/5/15 11:24:01
    大佬,ajax提交到后台成功后,怎么一次性清空图片和file数组 回复
    阳光宅男 0
    2021/3/21 10:06:36
    已经上传的图片怎么删除
        zzcxx1
        2021/3/22 22:52:48
        图片上传后会自动存在数组里的, 点击删除图标后, 数组里面也会自动删除,这个不用关心,只需要最后取数组的值就OK
    回复
    木星航 0
    2021/3/1 17:51:11

    插件很有用,继续支持

    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复