之前解决了一个页面中的单个附件上传问题,使用的是 id 定位。但是一个页面中,可能存在多个附件上传的地方,这时候如果继续使用 id,会出问题。
我依旧会上传一个附件。附件链接地址:
https://files.cnblogs.com/files/fchx91/uploadFilesNew.rar
so。拓展如下:
// * 添加图片
function bindPic(inputId, picShowId,inputDivId,maxLen){
var picFileLen = $("#"+inputDivId).children().length; //初始状态是从0 开始的
if(checkLen(picFileLen,maxLen)){
var newInput = $("#"+inputId).clone(); // 依旧是 input-file 的克隆,保存 files[0] 信息
newInput.attr("id",inputDivId+picFileLen); // 更换id
newInput.attr("onchange",""); //清除 onchange 事件
$("#"+inputDivId).append(newInput); // 存放在 inputDivId 中
// 以下内容是获取到 files[0]中的相关信息---不仅仅适用于图片,也适用于视频哟。 video--src / type
var iName = document.getElementById(inputId).files[0].name;
var iSize = Math.round(document.getElementById(inputId).files[0].size / 1024);
var sizeInfo;
if (iSize>1024){
sizeInfo = Math.round(iSize / 1024 )+"Mb";
} else {
sizeInfo = iSize +"Kb";
}
var iUrl = URL.createObjectURL($("#"+inputId)[0].files[0]);
var html ="<div class=‘pic-thumbnail‘ data-unique=‘"+iName+"‘><button class=‘delete-content‘ onclick=‘deletePic(this)‘></button>";
html += "<p data-value=‘picName‘><strong>"+iName+"</strong></p>";
html += "<span data-value=‘picSize‘>"+sizeInfo+"</span>";
html += "<img data-value=‘picImg‘ width=‘130px‘ src=‘"+iUrl+"‘ alt=‘"+iName+"‘ />";
$("#"+picShowId).append(html);
$("#"+picShowId).css("display","inline-block"); //picShowId 用来存放实际展示的图片信息列表
}
};
// 删除图片,并且删除对应的 file
function deletePic(obj){ //obj 在这里实际代表的是 this
var gradDiv = $(obj).parent().parent(); //找到 picShowId ;这个必须在前,否则 parIndex 会报错
var inputDivId = gradDiv.attr("id"); //根据 id 找到 inputDivId
// 删除这个结构的同时,需要删除对应的数据。打算采用找 index 的方法,来删除 picFile 中对应的数据
var parIndex = $(obj).parent().index();
$(obj).parent().remove();
var fileDivId = $("#"+inputDivId).siblings("[data-value=‘files‘]").attr("id");
console.log("存放files 的div 的ID 属性fileDivId===="+fileDivId);
// picInputDiv index>picIndex 角标依次 -1;
var inputLen = $("#"+fileDivId).children().length;
var Dvalue = inputLen-1-parIndex;
if(Dvalue ==0) {
$("#"+fileDivId).find("#"+fileDivId+parIndex).remove();
} else if(Dvalue > 0) {
$("#"+fileDivId).find("#"+fileDivId+parIndex).remove();
for(var i=1; i<Dvalue+1; i++){
$("#"+fileDivId+(parIndex+i)).attr("id",fileDivId+(parIndex+i-1));
}
}
};
// 监测是否超出限制
function checkLen(len,max){
if(len<max){
return true;
} else {
console.log("超出max 上限")
alert("不能再上传了。已经满额 ");
return false;
}
}
效果图:

原文:https://www.cnblogs.com/fchx91/p/10682545.html