產品提了壹個需求,要求在壹個html中實現多行多圖片上傳,原型圖如下:
2.1:html
html頁面由前端實現,此處增加<ul><li></li></ul>是為了配合圖片單擊放大圖片功能的實現
<ul_d="ul_other">
<li><inputtype="file"id="file_other"class="file_input"onchange="add_file_image('other')"></li>
</ul>
2.2:js
varimgSrc_other=[];
varimgFile_other=[];
functionadd_file_image(id){
varfileList=("file_"+id).files;//js獲取文件對象
if(verificationFile(fileList[0])){
for(vari=0;i
varimgSrcI=getObjectURL(fileList[i]);
if(id=="other"){
imgSrc_(imgSrcI);
if(fileList[i].size/1024>100){//大於100kb,進行壓縮上傳
fileResizetoFile(fileList[i],0.6,function(res){
imgFile_(res);
})
}else{
imgFile_(res);
}
}
addNewContent(id);
}
}
//新增圖片
functionaddNewContent(obj){
//刪除原先
$("#ul_"+obj).html("");
//判斷循環新增
var_ext="";
if(obj=="other"){
for(vara=0;a<imgSrc_;a++){
text+='<li><inputtype="file"id="file_other"class="file_input"onchange="add_file_image('other')"></li>';
}
}else{
('臟數據');
}
varoldBox="<li><divclass="filediv"><span>+</span>\n"+
"<inputtype="file"id="file_"+obj+""_lass="file_input"onchange="add_file_image('"+obj+"')">\n"+
"</div></li>";
$("#ul_"+obj).html(text+localText);
}
使用formData上傳
varform=("form_addArchive");//表單id
varformData=newFormData(form);
$.each(imgFile_other,function(i,file){
('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以便顯示
//文件格式驗證
//圖片壓縮
js壓縮圖片最低能壓縮多百分之多少js最低能壓縮百分之壹,最大可放大至原來的5倍2.最小可縮放至原來的百分之10第二種保持圖片寬度長度不變改變圖片質量,但不能用於放大圖片最小可壓縮至原圖的百分之壹
如何利用JS或者CSS樣式來自動調整圖片大小js版和css版自動按比例調整圖片大小方法,分別如下:
<title>javascript圖片大小處理函數</title>
<script_anguage=Javascript>
var_roMaxHeight=150;
var_roMaxWidth=110;
function_roDownImage(ImgD){
___var_mage=new_mage();
___=;
___if(>0&&>0){
___var_ate=(proMaxWidth/<_roMaxHeight/)?proMaxWidth/:proMaxHeight/;
__if(rate<=1){_
___=*rate;
___=*rate;
__}
__else_
_____________=;
_____________=;
_________}
___}
}
</script>
</head>
<body>
<img_rc=""_order=0_idth="150"_eight="110"_onload=proDownImage(this);_/>
<img_rc=""_order=0_idth="150"_eight="110"_nload=proDownImage(this);_/>
</body>
純css的防止圖片撐破頁面的代碼,圖片會自動按比例縮小:
<style_ype="text/css">
.content-width_MARGIN:_uto;WIDTH:600px;}
.content-width_mg{MAX-WIDTH:100%!important;HEIGHT:_uto!important;width:expression(>600?"600px":)!important;}
</style>
<div_lass="content-width">
_<p><img_rc="/down/js/images/"/></p>
_<p><img_rc="/down/js/images/"/></p>
</div>