手机端实现多图片上传

所属分类:输入-上传

 69209  225  查看评论 (95)
手机端实现多图片上传 ie兼容10

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

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

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

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

相关插件-上传

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

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

基于HTML5的jquery文件上传插件

这个插件是照着uploadify的api文档写的
  上传
 203423  295

支持IE8的多文件、多图异步上传并能预览的插件

该插件是基于百度webuploader的一个插件,支持IE8,可以上传任何文件,上传图片可以预览,异步上传,使用非常方便
  上传
 23765  77

js上传图片预览

js上传图片本地预览
  上传
 62179  207

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

    孙奇美--龙玲 0
    2018/5/14 10:15:28
    ie8不支持,对象不支持“getElementsByClassName”属性或方法 回复
    黑马驹子 0
    2018/3/24 11:30:07
    上传图片怎么获取图片的绝对路径? 回复
    Catwang_悟空空丶 0
    2018/3/22 16:03:15
    上传速速慢怎么解决啊???????? 回复
    ?? 0
    2018/2/28 9:36:16
    请问 如何限制上传图片的数量啊?
        pzf3299580
        2018/3/30 8:57:53
        function imgChange(obj1, obj2) {
               //获取点击的文本框
               var file = document.getElementById("file");
               //存放图片的父级元素
               var imgContainer = document.getElementsByClassName(obj1)[0];
               //获取的图片文件
               var fileList = file.files;
               if(fileList.length >4 ){
                   Alert('不能超过四张照片');
                   return false;
               }
               //文本框的父级元素
               var input = document.getElementsByClassName(obj2)[0];
               var imgArr = [];
               //遍历获取到得图片文件
               for (var i = 0; i < fileList.length; i++) {
                   var imgUrl = window.URL.createObjectURL(file.files[i]);
                   imgArr.push(imgUrl);
                   var img = document.createElement("img");
                   img.setAttribute("src", imgArr[i]);
                   var imgAdd = document.createElement("div");
                   imgAdd.setAttribute("class", "z_addImg");
                   imgAdd.appendChild(img);
                   imgContainer.appendChild(imgAdd);
        
        
               };
               imgRemove();
           };
        pzf3299581
        2018/3/30 15:13:45

        上条回复错了。做出修改。

        if(fileList.length >4 || (parseInt($(".z_addImg").length)+parseInt(fileList.length))>4){
              Alert('不能超过四张照片');
              return false;
        }
    回复
    qwer1 0
    2018/2/9 19:00:48

    如果一次性选多张的话应该就能获取多张  如果是一次一次点击添加 就只能 获取最后一张图片
    这个问题解决就完美了,等答案

        五月-0
        2018/4/17 10:18:52
        这个问题解决了吗
        17岁那年不要脸0
        2018/4/26 17:25:24
        我也好想知道这个问题怎么解决
    回复
    grin、sun 0
    2018/1/8 15:15:39

    删除后的图片无法二次上传,怎么进行多个上传按钮的手机上传?

        大神・0
        2018/1/30 10:35:04

        是的是的  这个怎么决绝

    回复
    见你,人群中 0
    2017/12/26 14:16:10

    删除本张图片再次上传本张图片上传不了,怎么解决呢

        qwer11
        2018/2/9 19:01:39
        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();
                     };
                 }
             };
         };
        ??0
        2018/3/21 15:17:19
        删除后的图片无法无法二次上传 这个问题 兄弟你解决没有?
    回复
    上官吹雪 0
    2017/12/6 14:32:09
    微信中无法调用手机摄像头拍照,怎么解决
        __夏虫语冰。0
        2018/1/9 17:56:39
        在HTML中去掉input的multiple属性,但是就只能单张上传了
    回复
    王军乐 0
    2017/11/14 18:25:02

     如果一次性选多张的话应该就能获取多张  如果是一次一次点击添加 就只能 获取最后一张图片

    这个问题解决就完美了,这个问题能解决吗??????
        Clay Figurine0
        2018/4/28 10:16:49
        这个问题解决了吗
    回复
    王军乐 0
    2017/11/14 17:00:10

    上传多张图片,后台只能接收到第一张,怎么回事??后台该怎么接收??

        王军乐0
        2017/11/14 17:14:16

        已解决

        以优雅的姿势摸爬滚打0
        2017/12/13 14:07:45
        后台只能接受最后一张图片怎么解决???
        bossaiguo0
        2018/5/7 14:16:05
        如何解决兄弟??
    回复
取消回复