javascript 规范图片大小的问题？
发布网友
发布时间：2022-04-21 04:55
共1个回答
热心网友
时间：2023-11-05 17:34
如何在前端用js进行多图片上传
产品提了一个需求,要求在一个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>
