手机端实现多图片上传

所属分类:输入-上传

手机端实现多图片上传 ie兼容10

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

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

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

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

相关插件-上传

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

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

js上传图片预览

js上传图片本地预览
  上传
 31211  131

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

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

上传图片-可裁剪

上传图片可裁剪
  上传
 35481  67

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

    lzj38230
    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的支持不完善,查了好多资料还没有找到解决办法,不好意思啊

    回复
    执&念0
    2017/1/4 9:01:08

    已经很好了,有详细的文档吗?

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

        暂时还没有呢,如果有疑问的话可以直接发出来的,我会时常关注的

    回复
    雨魔1
    2017/1/3 18:01:20
    发现新问题,在安卓手机上无法调用系统默认相机,给input加上属性capture="camera"就可以了 回复
    心灵0
    2016/12/27 14:12:44

    选择图片会出现图片重复上传(选择一次关掉,然后再选)

        雨魔0
        2017/1/3 18:01:40

        为了快速实现图片上传,所以没做,后期修改后会再上传的,谢谢

    回复
    汪汪汪哈喽程序猿0
    2016/12/26 16:12:26

    可以把压缩图片加上。还有就是图片直接上传道服务器

        雨魔0
        2017/1/3 18:01:24

        嗯嗯,修改后会再上传的,谢谢

    回复
取消回复
    PROMULGATOR

    雨魔

    北京市三信时代华北BGP互联节点