手机端实现多图片上传

所属分类:输入-上传

 11693  80  查看评论 (24)
手机端实现多图片上传 ie兼容10

js+css实现手机端的多图片上传,为了方便使用,css和js都未内联,为性能建议使用时改为外联;

如要用到pc端,直接去掉px转换为rem的js代码,修改单位即可;

因multiple在安卓手机中不兼容,所以在安卓上只能一次选中一张图片,在iOS系统上可以实现多图片的上传;

此代码仅为个人使用而编写,若有错误,欢迎提出,接收任何好的建议!

相关插件-上传

拖放文件上传与图像预览插件Dropzone.js

dropzone.js是重量轻的JavaScript库,将HTML元素设置为一个降落区,并通过Ajax文件被上传到服务器。
  上传
 42040  85

图片上传插件

图片上传插件
  上传
 24786  65

Web Uploader文件上传插件

WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件。在现代的浏览器里面能充分发挥HTML5的优势,同时又不摒弃主流IE浏览器,沿用原来的FLASH运行时,兼容IE6+,iOS 6+, android 4+。两套运行时,同样的调用方式,可供用户任意选用。 采用大文件分片并发上传,极大的提高了文件上传效率。
  上传
 110650  268

文件上传预览

实现文件上传预览效果,简单实用
  上传
 17446  56

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

    浇水吧 0
    2017/3/24 10:26:18

    上传多张图片的时候为什么后台只能获取到一张图片呢,求解

    回复
    --梦人李i 0
    2017/3/21 18:24:51

    怎么控制它上传的张数?只能限制5张的?

    回复
    WckY 0
    2017/2/23 19:10:20
    如何让默认的上传头像input在上传照片之后 位置在后面呢 相当于next 默认的上传头像input 始终在最前面  回复
    聚天地之正气 0
    2017/2/18 15:57:30
    我去你这个后端路径在哪里配置的??
        Cameilr0
        2017/3/23 10:27:44

        找到图片路径,怎么发给后端服务器啊。。 求大神指点!

    回复
    xi-mao-fang 0
    2017/2/15 10:38:35

    怎么上传到服务器呢?

    回复
    你的智商低就数月亮吧i 0
    2017/2/10 10:15:44
    删除再上传同一张图片就不显示了 回复
    好好敲代码#^_^# 0
    2017/2/8 10:31:13

    请问我在后台怎么接收多个“FILES”呢?为什么接收到的始终是一个

        浇水吧0
        2017/3/24 10:29:38

        这个问题你解决了吗,我也遇到这种问题了

    回复
    哥炫的是肥肉 0
    2017/1/20 13:46:27

    ios图片上传会倒过来

        雨魔0
        2017/1/22 16:41:32

        我这边使用时暂时没发现,是否是照片拍摄时是倒过来的

        雨魔0
        2017/1/23 13:22:08

        如果上传的时候图片压缩过的话就是反的,不压缩的话是正常的,你可以再试试

    回复
    lzj3823 0
    2017/1/14 13:50:46

    谷歌浏览器反应好慢,好奇怪 ,有问题想请教,可是不知道啥时候你可以看到消息

        lzj38231
        2017/1/14 14:00:15

        要修改成accept="image/jpg,image/jpeg,image/png"  这样的  谷歌浏览器就不会延迟好几秒。还是想起其他问题请教

        雨魔0
        2017/1/16 9:31:47

        只要是工作日我每天都会看一次的,只要我会的肯定告诉你

    回复
    、小男人 0
    2017/1/9 13:01:05

    为什么多图上传后台接收到的还是一张图片呢?我是小白、。麻烦发布者大大解释下

        雨魔0
        2017/1/11 10:01:29

        在iOS系统上是可以多选的,但是在安卓手机上是只能上传一张照片的,因为安卓浏览器对multiple的支持不完善,查了好多资料还没有找到解决办法,不好意思啊

    回复
取消回复