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内容
2 获取input[file]元素
3 对获取的file元素操作，也就是操作fileReader属性
1：Blob
2: File
3: FileList
4: FileReader
FileList ：
这里，默认状态下选择文件 每次files属性上FileList对象里只有一个file文件。
file对象中包含了name 文件名size type 文件类型lastModified 最后修改时间；
FileReader：异步读取本地文件内容；包括File 和Blob ；
创建FileReader对象读取file文件
关于fileReader的几个属性：
FileReader.error 只读一个 DOMException 代表在读取文件中出现的错误。 FileReader.readyState 只读一个数字表明的状态FileReader。这是以下之一：
FileReader.result 只读文件的内容。该属性仅在读取操作完成后才有效，并且数据的格式取决于使用哪种方法来启动读取操作。
fileReader的几个事件处理程序：
1 . FileReader.onbort:在读取操作中止时触发。
2 . FileReader.onerror:在读取操作遇到错误时触发。
3 . FileReader.onload:在读取操作成功完成时触发。
4 . FileReader.onloadstart:在开始阅读时触发。
5 . FileReader.onloadend:无论是否成功 只要读取操作完成都会触发。
6 . FileReader.onprogress:阅读Blob内容时触发。
FileReader的方法：
1 . FileReader.abort()中止读取操作
2 . FileReader.readAsArrayBuffer()完成时result属性包含ArrayBuffer表示文件数据
3 . FileReader.readAsBinaryString()完成时result属性将包含来自文件的原始二进制数据作为字符串。
4 . FileReader.readAsDataURL()完成时result属性包含data：表示文本数据的URL；
5 . FileReader.readAsText()完成时result属性包含文本的内容作为文本字符串。
<div ><div id="headImgPicview">
<img src="" id="headImgPic" width="200" height="auto"/>
</div>
<input type="text" id="headImgShow" name="headImg"
placeholder="图片(.jpg .jpeg .png)" size="40"
pattern="(.jpg$)|(.jpeg$)|(.png)|(.JPG$)|(.JPEG$)|(.PNG$)"
data-foolish-msg="请选择图片！"
value=""
required readonly/>
<div class="am-form-group am-form-file" style="width: 175px">
<button type="button" class="am-btn am-btn-default am-btn-sm">
<i class="am-icon-cloud-upload"></i>选择要上传的图片</button>
<input type="file" id="headImg" onchange="imgcheck('headImg',this)" multiple>
</div>
</div>
//文件动态上传方法+格式判断
function imgcheck(imgid,file){
if(!(/.jpg$/.exec($('#'+imgid).val())||(/.png/.exec($('#'+imgid).val()))||(/.jpeg$/.exec($('#'+imgid).val()))
||(/.JPG$/.exec($('#'+imgid).val()))||(/.PNG$/.exec($('#'+imgid).val()))||(/.JPEG$/.exec($('#'+imgid).val())) )){
alert("图片格式不正确！应为：.jpg .jpeg .png")
$('#'+imgid).val('')
}else{
var imgURL = document.getElementById(imgid)
$('#'+imgid+'Show').attr('placeholder',imgURL.value)
//调用图片预览
previewImage(imgid+'Pic',file)
