多图片上传 到后台只能接收一个图片的问题 5C

这是在往事下载的模板的js

 ~(function(win){
    var htmls = '<input type="file" name="file" id="" class="imgFiles" style="display: none" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" multiple>'+
                '<div class="header">'+
                '    <span class="imgTitle">'+
                '        添加图片'+
                '        <b>'+
                '            *'+
                '        </b>'+
                '    </span>'+
                '    <span class="imgClick">'+
                '    </span>'+
                '    <span class="imgcontent">'+
                '        请上传'+
                '    </span>'+
                '</div>'+
                '<div class="imgAll">'+
                '    <ul>'+
                '    </ul>'+
                '</div>';
    var ImgUploadeFiles = function(obj,fn){
        var _this = this;
        this.bom = document.querySelector(obj);

        if(fn) fn.call(_this);
        this.ready();

    };
    ImgUploadeFiles.prototype = {
        init : function(o){
            this.MAX = o.MAX || 5;
            this.callback = o.callback;
            this.MW = o.MW || 10000;
            this.MH = o.MH || 10000;
        },
        ready : function(){
            var _self = this;
            this.dom = document.createElement('div');
            this.dom.className = 'imgFileUploade';
            this.dom.innerHTML = htmls;
            this.bom.appendChild(this.dom);
            this.files = this.bom.querySelector('.imgFiles');
            this.fileClick = this.bom.querySelector('.imgClick');
            this.fileBtn(this.fileClick,this.files);
            this.imgcontent = this.bom.querySelector('.imgcontent');
            this.imgcontent.innerHTML = '请上传不大于<b style="color:red">'+this.MAX+'</b>张'+_self.MW+' * '+_self.MH+'像素的图片';

        },
        fileBtn : function(c,f){
            var _self = this;
            var _imgAll = $(c).parent().parent().find('.imgAll ul');
            $(c).off().on('click',function(){
                $(f).click();

                $(f).off().on('change',function(){
                    var _this = this;
                    _private.startUploadImg(_imgAll,_this.files,_self.MAX,_self.callback,_self.MW,_self.MH);
                });
            });
        }
    };
    var _dataArr = [];
    var _private = {
        startUploadImg : function(o,files,MAX,callback,W,H){
            _dataArr.length = 0;
            var _this = this;
            var fileImgArr = [];

            if(files.length > MAX ){
                alert('不能大于'+MAX+'张');
                return false;
            };
            var lens = $(o).find('li').length ;
            if(lens >= MAX ){
                alert('不能大于'+MAX+'张');
                return false;
            };

            for(var i=0,file;file=files[i++];){


                var reader = new FileReader();
                reader.onload = (function(file){
                    return function(ev){
                        var image = new Image();  
                        image.onload=function(){  
                              var width = image.width;  
                              var height = image.height;  

                            fileImgArr.push({
                                fileSrc : ev.target.result,
                                fileName : file.name,
                                fileSize : file.size,
                                height : height,
                                width : width
                            });
                        };  
                         image.src= ev.target.result; 


                    };
                })(file);
                reader.readAsDataURL(file);
            }
            //创建分时函数
            var imgTimeSlice = _this.timeChunk(fileImgArr,function(file){
                if(file.width > W || file.height > H){
                    alert('图片不能大于'+W+'*'+H+'像素');
                    return false;
                }
                //调用图片类
                var up = new ImgFileupload(o,file.fileName,file.fileSrc,file.fileSize,callback);
                up.init();
            },1);
            imgTimeSlice(); //调用分时函数
        },
        timeChunk : function(arr, fn, count) {
            var obj, t;
            var len = arr.length;
            var start = function() {
                for (var i = 0; i < Math.min(count || 1, arr.length); i++) {
                    var obj = arr.shift();
                    fn(obj)
                }
            };
            return function() {
                t = setInterval(function() {
                    if (arr.length === 0) {
                        return clearInterval(t);
                    }
                    start();
                },200)
            }
        }
    };

    var ImgFileupload = function(b,imgName,imgSrc,imgSize,callback){
        this.b = b;
        this.imgName = imgName;
        this.imgSize = imgSize;
        this.imgSrc = imgSrc;
        this.callback = callback;
    };
    var _delId = 1; //删除id用于判断删除个数
    ImgFileupload.prototype.init =function() {
        _delId++;
        var _self = this;
        this.dom = document.createElement('li');
        this.dom.innerHTML = 
                            '    <img src="res/images/imgup/login.gif" alt="" data-src="'+this.imgSrc +'" class="imsg">'+
                            '    <i class="delImg">'+
                            '        X'+
                            '    </i>';
        $(this.dom).attr({'data-delId':_delId,'data-delName':this.imgName});                
        $(this.b).append(this.dom);
        var _Img = new Image();
        _Img.src = $(this.dom).find('img').attr('data-src');
        _Img.onload = function(){
            $(_self.dom).find('img').attr('src',_Img.src);
        }
        _dataArr.push({'delId' :_delId,src :  this.imgSrc});
        _self.callback(_dataArr);
        // $(this.b).parent().parent().parent().attr('data-dataImgs',JSON.stringify(_dataArr));
        var _delAll = $(this.b).find('.delImg');
        for(var i=0;i<_delAll.length;i++){
            $(_delAll[i]).off().on('click',function(){
                $(this).parent().fadeOut('slow',function(){
                    $(this).remove();
                });
                var _deid = $(this).parent().attr('data-delId');
                for(var n=0;n<_dataArr.length;n++){
                    if(_dataArr[n].delId == _deid){
                        _dataArr.splice(n,1);
                    }
                }
                _self.callback(_dataArr)
                // $(this.b).parent().parent().parent().attr('data-dataImgs',JSON.stringify(_dataArr))

            });
        };
        var _Imgpreview = $(this.b).find('img');
        for(var k=0;k<_Imgpreview.length; k++){
            $(_Imgpreview[k]).off().on('click',function(){
                console.log($(this).attr('src'))
            })
        }

    }

    win.ImgUploadeFiles = ImgUploadeFiles;
})(window);

图片说明

后台接收 file 好像只能接收最后添加的那一张
请问前台怎么传过去
后台怎么接收所有的图片

 var imgFile = new ImgUploadeFiles('.box',function(e){
            this.init({
                MAX : 3, //限制个数
                MH : 5800, //像素限制高度
                MW : 5900, //像素限制宽度
                callback : function(arr){
                    console.log(arr)
                }
            });
        });

前台给的js
console的数据是这样的
图片说明
看了 这个数组有图片的 信息 但是不知道 怎么封装 或者怎么传过去

7个回答

一个前端多张图片预览的demo:http://rattenking.gitee.io/blog/03/more_pic_file.html
js:https://blog.csdn.net/m0_38082783/article/details/77254875
html:

 <input type="file" id="file" multiple="multiple">

multiple属性讲解: http://www.w3school.com.cn/tags/att_input_multiple.asp

m0_38082783
Rattenking that.files是一个数组,循环获取
一年多之前 回复
m0_38082783
Rattenking var _file = that.files,str = ""; console.log(_file); //限制上传图片的最大值 if(_file.length > options.maxLen){ alert("最多上传" + options.maxLen + "张图片!"); return; } //循环拼接为字符串 for(var i = 0; i < _file.length; i++){ str += "<img src='" + getObjectURL(_file[i]) + "'/>"; }
一年多之前 回复
lacrimarrum
lacrimarrum 你好 你的代码我看了 现在关键的问题是 选择的多张照片 怎么在js中获取所有的照片 input 的 file 貌似只能取到最后一张图片
一年多之前 回复

前台你用files数组传过去,后台通过List files接收,然后遍历就有了

Z_linht
纷飞梦雪 回复lacrimarrum: 用fromData来封装上传
一年多之前 回复
lacrimarrum
lacrimarrum ? 关键就是前台我找不到 这个值在哪 前台的 name 的 file 也只有一个值啊 明明选了几张 file也是只有一个值
一年多之前 回复

前台的name值有问题,应该设置成数组,不然会被覆盖

lacrimarrum
lacrimarrum 我的问题更新了下 它前台给的代码 返回了 数组 请问怎么封装 或者 怎么 一块传过去
一年多之前 回复

var imgFile = new ImgUploadeFiles('.box',function(e){
this.init({
MAX : 3, //限制个数
MH : 5800, //像素限制高度
MW : 5900, //像素限制宽度
callback : function(arr){
console.log(arr)
}
});
});

    页面给的js 返回的arr 数组 也不知道干嘛用

this.files = this.bom.querySelector('.imgFiles');
你如果用到了插件的话,可能文件插件帮你封装了
后天用下面的方法获取
MultipartHttpServletRequest mulReq= (MultipartHttpServletRequest) request;
Listlist = mulReq.getFiles("file");

F12看一下 network选项中,你传的图片arr有没有带过去。


这样写应该可以

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!

相似问题

3
nodejs后台restful api上传图片的content-type问题
9
Vue前台传的字符串数组后台接收不到
6
使用Element的上传图片组件和Vue实现上传图片功能,在线等,急急急!!!
8
$.ajax()传递参数后台controller接收不到的问题
4
spring的ajax问题,后台接收HttpServletRequest一直为空
5
如何将图片上传的静态资源服务器?
2
java上传文件时,前台的如何把文件以二进制的方式传到后台
2
MultipartFile多张图片上传,只能传一张,请问到底是这么回事啊,谢谢
2
求一个asp.net多图片上传带预览的控件,最好是有后台引用代码的,蟹蟹各位了
4
我使用ajax往后台传数据,后台的接收类接收为null。
5
后台接收post请求参数问题
4
后台改前台的图片,怎么改
1
微信小程序上传文件到nginx服务器,php后台接收图片,但是找不到页面
6
SpringMVC - 前台传JSON数据到后台,那后台是不是只能用Map或者实体类?
0
我在实现RecycleView拖拽的功能之后,按项目要求要把完成拖拽之后所有item的当前位置上传后台重新排序
1
前台问号传参到后台接收时为null
2
使用html2canvas截图生成的Base64 参数,传递到后台,解析之后下载的图片和截图的图片不一致问题
2
使用帆软报表进行图片上传时,sqlServer数据库中字段使用varbinary存图片,字段怎么设置啊?
2
SpringBoot editorMD 图片跨域上传问题.
1
Springboot图片上传问题,MultipartFile file 一直报空,该如何将前台的文件传递到后台?