jQuery多图片上传

所属分类:输入-上传

 49440  333  查看评论 (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" />

上传图片

相关插件-上传

html5 头像上传更换插件

html5 头像上传、更换、剪切插件
  上传
 172400  1328

多图片上传预览(纯前端)

多图片上传预览,已测试ie 360 火狐 谷歌浏览器
  上传
 254090  585

html5文件上传插件Pure HTML5 file upload

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

图片上传插件zyupload java版实例代码

本插件经本人多次修改完善,功能齐全,支持多图片上传、拖拽上传、剪辑、编辑,上传预览,编辑获取默认值等功能,并且每一个功能对应一个demo,简单易懂,方便学习修改
  上传
 115799  806

讨论这个项目(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
        暂时不想弄,你可以自己根据插件的基础上添加
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复