如何在前端用js进行多图片上传

1、背景

    产品提了一个需求，要求在一个html中实现多行多图片上传，原型图如下:

2

2、实现细节

    2.1 ：html

        html页面由前端实现，此处增加

是为了配合图片单击放大图片功能的实现

        

              

        

    2.2 ：js

        var imgSrc_other=[];

        var imgFile_other=[];

        function add_file_image(id) {

            var fileList =document.getElementById("file_"+id).files;// js 获取文件对象

            if (verificationFile(fileList[0])){

                for(var i =0;i

                    var imgSrcI =getObjectURL(fileList[i]);

                        if (id=="other"){

                            imgSrc_other.push(imgSrcI);

                            if(fileList[i].size/1024 >100) { //大于100kb，进行压缩上传

                                 fileResizetoFile(fileList[i],0.6,function(res){

                                  imgFile_other.push(res);

                                })

                            }else{

                                imgFile_other.push(res);

                        }

                    }

                    addNewContent(id);

                }

        }

    //新增图片

    function addNewContent(obj) {

        //删除原先

        $("#ul_"+obj).html("");

        //判断循环新增

        var  text="";

        if (obj=="other"){

           for(var a =0;a < imgSrc_examReportCard.length;a++) {

            text +='

';

           }

        }else{

            console.log('脏数据');

        }

        var oldBox ="

+\n" +

        "\n" +

        "

";

        $("#ul_"+obj).html( text+localText);

    }

3、上传代码

    使用formData上传

    var form =document.getElementById("form_addArchive");//表单id

    var formData =new FormData(form);

    $.each(imgFile_other,function(i, file){

        formData.append('imgFileOther', file);

    });

$.ajax({

    url:url,

    type:'POST',

    async:true,

    cache:false,

    contentType:false,

    processData:false,

    dataType:'json',

    data:formData,

    xhrFields:{

        withCredentials:true

    },

    success:function(data) {

     }

  },

  error:function(XMLHttpRequest, textStatus, errorThrown) {

    }

})

后台使用@RequestParam(value ="imgFileOther", required=false) List imgFileOther, 接受

//获取图片url以便显示       

function getObjectURL(file) { var url = null ; if (window.createObjectURL!=undefined) { // basic url = window.createObjectURL(file) ; } else if (window.URL!=undefined) { // mozilla(firefox) url = window.URL.createObjectURL(file) ; } else if (window.webkitURL!=undefined) { // webkit or chrome url = window.webkitURL.createObjectURL(file) ; } return url ;}

//文件格式验证

function verificationFile(file) {

    var fileTypes = [".jpg", ".png", ".img"];

    var isNext = false;var fileEnd = file.name.substring(file.name.indexOf("."));

    for (var i = 0; i < fileTypes.length; i++) { if (fileTypes[i] == fileEnd) { isNext = true; break; }}

    if (!isNext){ console.log("不接受此文件类型,请选择jpg、png、img图像"); file.value = ""; isNext = false;}return isNext;}

//图片压缩

function urltoImage (url,fn){ var img = new Image(); img.src = url; img.onload = function(){ fn(img); } } function imagetoCanvas(image){ var cvs = document.createElement("canvas"); var ctx = cvs.getContext('2d'); cvs.width = image.width; cvs.height = image.height; ctx.drawImage(image, 0, 0, cvs.width, cvs.height); return cvs ; } function canvasResizetoFile(canvas,quality,fn){ canvas.toBlob(function(blob) { fn(blob); },'image/jpeg',quality); } function filetoDataURL(file,fn){ var reader = new FileReader(); reader.onloadend = function(e){ fn(e.target.result); }; reader.readAsDataURL(file); } function dataURLtoImage(dataurl,fn){ var img = new Image(); img.onload = function() { fn(img); }; img.src = dataurl; } function dataURLtoFile(dataurl) { var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1], bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n); while(n--){ u8arr[n] = bstr.charCodeAt(n); } return new Blob([u8arr], {type:mime}); } function fileResizetoFile(file,quality,fn){ filetoDataURL (file,function(dataurl){ dataURLtoImage(dataurl,function(image){ canvasResizetoFile(imagetoCanvas(image),quality,fn); }) }) }