手机端实现多图片上传

所属分类:输入-上传

 151090  615  查看评论 (123)
分享到微信朋友圈
X
手机端实现多图片上传 ie兼容10

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

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

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

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

相关插件-上传

jQuery h5拖拽多文件上传

可用input控件选择文件,也可以拖拽文件,可以一次上传多个文件,测试需要后台配合,支持失败重传,支持过滤文件类型,文件大小,及同一文件重复上传。
  上传
 87146  526

jQuery多图压缩上传

前端对图片的压缩、可以选择多张、可以预览、还可以删除
  上传
 56181  409

手机端实现多图片上传预览

HTML+CSS+原生JS实现手机端实现多图片上传,选中图片后,可以点击放大(有一定的注释,在PC,ipad,IOS和安卓上都测试过)
  上传
 33476  313

基于HTML5的jquery文件上传插件

这个插件是照着uploadify的api文档写的
  上传
 290784  624

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

    Deja-vu n. 0
    2020/3/17 17:44:42
    秋水人家 0
    2019/11/19 11:57:37
    哥。上传了 3张 后台就收到2张 老是丢图 怎么解决的 回复
    安之若素 0
    2019/8/9 9:44:18
    大神在手机端上传图片怎么会旋转90°哦 回复
    Junisyoan 0
    2019/3/22 11:16:10
    演示的案例有问题 回复
    一克拉的梦想 0
    2018/11/9 16:25:47
    后台怎么获取文件 回复
    HvShop 0
    2018/10/9 17:28:02
    这个怎么提交form表单啊,然后在接收 回复
    游戏专用 0
    2018/8/25 17:50:03
    这个我调试的不兼容IOS版本的,怎么解决啊,有遇到这种问题的么
        ……辉0
        2018/10/16 13:34:46
        难道前端这东西你不懂吗?
    回复
    曲终、人未散 ? 0
    2018/8/1 21:11:55
    有没有成品的? 回复
    凉城中人凉人心 0
    2018/7/31 11:30:29
    这个怎么发给后台啊 这里只有一个图片的数组哇 后台是用file 接收的
        HvShop0
        2018/10/9 17:28:32
        是啊,我也在等这个啊,后台怎么获取啊
        甜甜0
        2019/1/14 14:25:28
        解决了嘛,我也遇到了
        j~o~an0
        2019/3/19 17:36:21
        同问....
        我叫MT1
        2019/12/4 12:01:07
        function submit() {
            console.log(imgList)
            var imgLists = []
            var formData = new FormData();
            for (var i = 0; i < imgList.length; i++) {
                imgLists.push(imgList[i])
                formData.append('files', imgLists[i])
            }
            console.log(imgLists)
            // return false
            $.ajax({
                url: 'url地址',
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                async: false,
                success: function(data) {
                    console.log(data);
                }
            })
        }

        每次选中图片后将文件file添加到数组中

    回复
    斗转星移 0
    2018/7/10 17:14:07
    删除图片后不能重复选择的问题大家解决了吗?
        斗转星移0
        2018/7/10 17:40:49
        unction imgremove() {
            var imglist = document.getelementsbyclassname("z_addimg");
            var mask = document.getelementsbyclassname("z_mask")[0];
            var cancel = document.getelementsbyclassname("z_cancel")[0];
            var sure = document.getelementsbyclassname("z_sure")[0];
            f(var j = 0; j < imglist.length; j++) {
                imglist[j].index = j;
                imglist[j].onclick = function() {
                    var t = this;
                    mask.style.display = "block";
                    cancel.onclick = function() {
                        mask.style.display = "none";
                    };
                    sure.onclick = function() {
                        mask.style.display = "none";
                        t.setattribute("id", "remove");
                        $("#remove").remove();
                    };
                }
            };
        };
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复