您的位置：首页 > 百科管理 > 详情

js上传图片压缩-如何利用JS或者CSS样式来自动调整图片大小

原创：找图网 2023-05-02 20:00:08

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

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

2.1 :html

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

</ul>

2.2 :js

var imgSrc_other=[];

var imgFile_other=[];

function add_file_image(id) {

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

if (verificationFile(fileList[0])){

for(var i =0;i

var imgSrcI =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);

}

//新增图片

function addNewContent(obj) {

//删除原先

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

//判断循环新增

var text="";

if (obj=="other"){

for(var a =0;a < imgSrc_;a++) {

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

}

}else{

('脏数据');

}

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 =("form_addArchive");//表单id

var formData =new FormData(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>

var proMaxHeight = 150;

var proMaxWidth = 110;

function proDownImage(ImgD){

var image=new Image();

if(>0 && >0){

var rate = (proMaxWidth/ < proMaxHeight/)?proMaxWidth/:proMaxHeight/;

if(rate <= 1){

= *rate;

=*rate;

}

else {

= ;

}

</script>

</head>

<body>

</body>

纯css的防止图片撑破页面的代码,图片会自动按比例缩小:

.content-width {MARGIN: auto;WIDTH: 600px;}

.content-width img{MAX-WIDTH: 100%!important;HEIGHT: auto!important;width:expression( > 600 ? "600px" : )!important;}

</style>

</div>