评论：手机端实现多图片上传  [查看原文]

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;
}

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

五月-0
2018/4/17 10:18:52
这个问题解决了吗

17岁那年不要脸0
2018/4/26 17:25:24
我也好想知道这个问题怎么解决

斗转星移0
2018/7/10 17:44:20
您好，这个问题解决了吗

kmokooo~0
2018/8/1 23:15:17
对 有这个问题

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

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

是的是的  这个怎么决绝

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

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
2018/1/9 17:56:39
在HTML中去掉input的multiple属性，但是就只能单张上传了

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

Clay Figurine0
2018/4/28 10:16:49
这个问题解决了吗

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

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

已解决

以优雅的姿势摸爬滚打0
2017/12/13 14:07:45
后台只能接受最后一张图片怎么解决？？？

bossaiguo0
2018/5/7 14:16:05
如何解决兄弟？？

宝安周杰伦0
2018/5/29 18:35:07
老哥教一下我怎么解决的，谢谢

?血樱┽野神?ZYG护城0
2018/6/21 10:35:57
可以先上传图片到服务器，传输一个图片名的字符串，后台接收

秋水人家0
2019/11/19 11:54:36
如何解决的？

后台怎么获取不到值呀

王军乐1
2017/11/15 14:29:37

前台用formdata

var formData = new FormData($( "#exeriseForm" )[0]);
var imgg = [];
imgg = $('.z_addImg img');
var imgSrc = [];
var imgBase64 = [];
for (var i = 0; i < imgg.length; i++) {
    if (imgg[i].src != 'undefined') {
        imgSrc.push(imgg[i].src) var image = new Image();
        image.src = imgg[i].src;
        var base64 = getBase64Image(image);
        imgBase64.push(base64);
        formData.append("imageName", base64.split(',')[1]);
    }
}

后台

String[] str = request.getParameterValues("imageName");

就可获取到值，让后用上传base64的图片就行了

米达斯之手0
2017/11/28 9:54:43

getBase64Image  这个方法说是未定义，应该去哪个js文件找？

GIve0
2019/3/10 20:15:14

function getBase64Image(img) {
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0, img.width, img.height);
    var ext = img.src.substring(img.src.lastIndexOf(".") + 1).toLowerCase();
    var dataURL = canvas.toDataURL("image/" + ext);
    return dataURL;
}

邵阳神墨-彭斌0
2021/5/11 21:14:57
这些代码放在哪？

怎么调不出来相机啊

奇丑无比0
2018/5/10 13:05:03
capture="camera" 加这个属性

上传一张图片 然后删除  再上传相同图片 上传不了 求解答

上传图片歪了这是什么鬼

怎么实现控制上传图片数量呢

发错评论，sorry

微信端上传不了