jQuery多图片上传

所属分类:输入-上传

 50438  334  查看评论 (24)
分享到微信朋友圈
X
jQuery多图片上传 ie兼容10

注:如果您在演示时一次上传多张大图时会将图片转为Base64编码可能会有点卡

更新时间:2018/12/29 上午11:32:51

更新说明:版本提交错误,最新版本


更新时间:2018/12/20 上午11:09:55

更新说明:更改删除第一个li的图片,在左右移动出现重复的图片问题


使用方法

引用下列的js文件

<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script type="text/javascript" src="js/updateimg.js"></script>

html

<div>
    <div id="showimg">
        <ul id="showui"></ul>
        <div id="showinput"></div>
    </div>
    <div>
        <input type="file" id="upgteimg" value="" multiple="multiple" />
    </div>
    <button id="submit">开始上传</button>
</div>

主要是<ul id="showui"></ul>,这是加载图片的

<input type="file" id="upgteimg" value="" multiple="multiple" />

上传图片

相关插件-上传

jQuery图片上传预览支持拖拽

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

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

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

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

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

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

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

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

    远来 0
    2019/7/17 11:36:59
    能控制上传图片的数量吗 回复
    飞羽 0
    2019/6/22 22:02:08
    PHP后台怎么写知道吗,求告知!谢谢。 回复
    魅影 0
    2019/6/19 17:39:26
    移动端拍照的照片回旋转90度怎么判断是拍照的的图片旋转回来
        长庭北望0
        2019/6/21 15:34:39
        你可以在原本的js中在加一个选转按钮,在写一个旋转函数,css你可以根据你自己的喜好来替换css,有一个我刚根据js旋转图片的,我发一个百度云链接链接:链接:https://pan.baidu.com/s/1TUrRq3f7UXAw-peEXBtHfw
        提取码:o0ia
    回复
    魅影 0
    2019/6/19 17:37:38
    拍照图片怎么旋转回来 回复
    卫晓光 0
    2019/5/6 8:52:27
    不错,推荐下载 回复
    卢肖玲-4922 0
    2019/4/23 15:14:22
    如果只上传一张图片,删除后,不能上传 回复
    冰凉 0
    2019/4/20 8:17:03
    可以限制上传大小、图片格式和上传个数吗
        长庭北望0
        2019/6/21 15:39:30
        那个没有做,这个js写到删除切换就好臃肿了,你可以自己写个判断来限制,上传个数是dataArr.length来判断的,上传大小与图片格式建议你去看一下https://www.cnblogs.com/SimonHu1993/p/9253732.html
    回复
    微笑、掩盖悲伤 0
    2019/3/18 14:23:26
    我上传的图片大点5M左右 就好卡 这怎么解决啊
        长庭北望0
        2019/6/21 15:40:27
        这个我没有研究过,你可以看看别的插件
    回复
    太多至死不渝的现实虚伪? 0
    2019/1/25 16:01:56
    有这样的问题可以修复一下么,我一张一张上传,最后点击开上上传 代码数组形式传递,但后台接受是一张图片的数据,我要是一次性将文件夹的图片都上传上去之后点击开始上传,接受的图片是所有的。
        长庭北望1
        2019/2/10 13:32:50

        你可以更改send方法,实现你功能,点击那个加号实际上并没有去发送请求,发送请求的是点击开始上传这个方法,你需要的是,把获取的数据,在那里用ajax提交数据

        function send() {
           方法
        }
        长庭北望1
        2019/2/10 13:36:59
        少说了一个东西,存储数据的变量叫dataArr,你可以打印一下
    回复
    ¤残@梦… 0
    2019/1/11 14:40:37
    能不能做到编辑
        长庭北望0
        2019/6/21 15:41:30
        暂时不想弄,你可以自己根据插件的基础上添加
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复