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

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

    2.1 ：html

        html页面由前端实现，此处增加<ul><li></li></ul>是为了配合图片单击放大图片功能的实现

        <ul  id="ul_other">

              <li><input type="file" id="file_other" class="file_input" onchange="add_file_image('other')"></li>

        </ul>

    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 =0i

                    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 =0a <imgSrc_examReportCard.lengtha++) {

            text +='<li><input type="file" id="file_other" class="file_input" onchange="add_file_image('other')"></li>'

           }

        }else{

            console.log('脏数据')

        }

        var oldBox ="<li><div class=\"filediv\"><span>+</span>\n" +

        "<input type=\"file\" id=\"file_"+obj+"\"  class=\"file_input\" onchange=\"add_file_image('"+obj+"')\">\n" +

        "</div></li>"

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

    }

    使用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<MultipartFile>imgFileOther, 接受

//获取图片url以便显示       

//文件格式验证

//图片压缩

1、新建一个HTML文件，保存为test.html，用于编写代码实现拖放功能 。

2、在test.html添加一个div标签，并且给它一个id，用于下面编写样式。

3、通过div的id , 给div定义CSS样式，例如，把div定义为一个带边框的长方形。下面将实现将图片拖放在这个长方形中。

4、在div的下面定义一张被拖放图片，并设置该图片的属性为允许被拖放。

5、在被拖放的图片上加上一个ondragstart事件，即图片被拖动时触发这个事件。再给事件一个函数，用于拖动图片时，把图片保存在一个变量中。

6、运行代码，在浏览器中查看结果：至此，完成了使用JS实现拖放图片到div中的功能。

function showImage(fileid,imgid,atagID){

var ext = "_0"

var thumb = $('img#'+imgid)

var litbox = $('a#'+atagID)

var img1path = document.getElementById("img1path")

if($('.onTeedaError').length>0){

//img1path.value=""

}

var messages =document.getElementById("messages")

if(messages!=null){

//img1path.value=""

}

new AjaxUpload(fileid, {

action: '../../PdfChangeImgUploadServlet?pdfNameEnd=_PERT',

name: ext,

onSubmit: function(file, extension) {

extension=extension.toLowerCase()

if(extension=="pdf")

{

$("#photoError").hide()

$.blockUI({

message: $('span#displayBox'),

css: {

border: 'none',

width: '270px',

}

})

}else{

$("#photoError").show()

return false

}

},

onComplete: function(file, response) {

$('.pdfImg').remove()

$('#pfont').hide()

$.unblockUI()

var res = eval('('+response+')')

var timestemp = new Date().getTime()

var srcStr = res['srcStr']

$('#addImg').val(res['srcStr'])

var imgWidth = res['w'] + "px"

var imgHeight = res['h'] + "px"

$("#addImgWidth").val(imgWidth)

$("#addImgHeight").val(imgHeight)

var str = ""

var arr = []

arr = srcStr.split(",")

$('#imgFile').attr("value",srcStr)

for(var i=0i<arr.lengthi++){

var jpgsrc = arr[i] + '?'+ timestemp

if(i == 0){

str=str+"<a class=\"pdfImg\" style=\"margin-left:10px\" href="+jpgsrc+" rel=\"lightbox"+timestemp+"\">"

str=str+"<img class=\"jpgImgFont\" src="+jpgsrc+" style=\"vertical-align:middlecursor:pointerwidth:"+ imgWidth +"height:"+ imgHeight +" \" />"

str=str+"</a>"

} else {

str=str+"<a class=\"pdfImg\" style=\"margin-left:10pxdisplay:none\" href="+jpgsrc+" rel=\"lightbox"+timestemp+"\">"

str=str+"<img class=\"jpgImgFont\" src="+jpgsrc+" style=\"vertical-align:middlecursor:pointerwidth:"+ imgWidth +"height:"+ imgHeight +" \" />"

str=str+"</a>"

}

}

$('#imgFontDiv').append(str)

//thumb.attr('src', res['src']+'?'+timestemp)

//litbox.attr('href', res['src']+'?'+timestemp)

lightbox.refresh()

$('.jpgImgFont').attr('style', 'width: ' + imgWidth + 'height: ' + imgHeight + "" ).hide().fadeIn('slow')

if(res['img1path']!=""){

img1path.value=res['img1path']

}

if (imgid == 'imgFont') {

document.getElementById("photoName").value=res['srcStr'].substring(res['srcStr'].lastIndexOf("/")+1)

}

//}

}

})

}

function goClearPhoto(textID,imgID,hrefID,photoName){

var _file = document.getElementById(textID)

if(_file.files)

{

_file.value = ""

}

else

{

if (typeof _file != "object")

{

return null

}

var textID=document.getElementById(textID)

textID.value=""

var timestemp = new Date().getTime()

var src=document.getElementById("carPermitDefaultPath").value

var thumb = $('img#'+imgID)

var litbox = $('a#'+hrefID)

thumb.attr('src',"/groupware/images/PdfSample.png")

thumb.attr('style', 'width:230pxheight:240pxborder:0pxvertical-align:middlecursor:pointer' ).hide().fadeIn('slow')

litbox.attr('href',"/groupware/images/PdfSample.png"+'?'+timestemp)

$('.pdfImg').remove()

litbox.show()

lightbox.refresh()

var photoName=document.getElementById(photoName)

photoName.value=null

var imgFont= document.getElementById(imgFont)

imgFont.value = null

}

$("#imgFile").val("")

$("#img1path").val("")

}

html:

<body onload="showImage('insUpdPermitPhoto','imgFont','pfont')>

<div style="margin-top:3pxmargin-bottom:-8px">

<span class="sl-custom-file" style="">

<input type="text" id="img1path" placeholder="対応フォーマット：pdfのみ" readonly="true" class="input-height" style="width:260pxheight:20px"/>

<button class="btn btn-small" id="reference" type="button" style="margin-left:-2pxmargin-top:-12px">

<span style="color:black">参照</span>

</button>

<input type="file" id='insUpdPermitPhoto' class="fileTransIE10 ui-input-file" name="ufile" onChange="getValue(this,'img1path')" />

</span>

<a href="javascript:void(0)" onfocus="this.blur()" onClick="goClearPhoto('img1path','imgFont','pfont','photoName')" class="btn btn-small" style="margin-top:-15px">

<span style="color:black">削除</span>

</a>

</div>

后台用copy方法把图片复制到指定路径就可以了

---