lacrimarrum 2018-05-18 02:37 采纳率: 61.8%
浏览 4427
已结题

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

这是在往事下载的模板的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条回答 默认 最新

  • 子幽 2018-05-18 03:41
    关注

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

    评论

报告相同问题?

悬赏问题

  • ¥100 关于使用MATLAB中copularnd函数的问题
  • ¥20 在虚拟机的pycharm上
  • ¥15 jupyterthemes 设置完毕后没有效果
  • ¥15 matlab图像高斯低通滤波
  • ¥15 针对曲面部件的制孔路径规划,大家有什么思路吗
  • ¥15 钢筋实图交点识别,机器视觉代码
  • ¥15 如何在Linux系统中,但是在window系统上idea里面可以正常运行?(相关搜索:jar包)
  • ¥50 400g qsfp 光模块iphy方案
  • ¥15 两块ADC0804用proteus仿真时,出现异常
  • ¥15 关于风控系统,如何去选择