本文目录一览：
前端JS的问题，如图设置图片宽100%，为什么下面会多出一截？
你需要在 img 标签的上一级标签设置 css line-height: 0，或者把 img 变成 block 元素
如何在前端用js进行多图片上传
产品提了一个需求，要求在一个html中实现多行多图片上传，原型图如下:
2.1 ：html
html页面由前端实现，此处增加ulli/li/ul是为了配合图片单击放大图片功能的实现
ul id=”ul_other”
liinput 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 =0;i
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 =0;a imgSrc_examReportCard.length;a++) {
text +=’liinput type=”file” id=”file_other” class=”file_input” onchange=”add_file_image(‘other’)”/li’;
}
}else{
console.log(‘脏数据’);
}
var oldBox =”lidiv 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) ListMultipartFile imgFileOther, 接受
//获取图片url以便显示
//文件格式验证
//图片压缩
js 前端上传多张图片
可以用webuploader插件，上传成功后，服务端返回图片地址，客户端img显示图片
X关闭按钮这个得自己用css样式控制，点击X后，服务端删除图片，然后前端移除该X掉的图片
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/280653.html
微信扫一扫 
支付宝扫一扫 