之前解决了一个页面中的单个附件上传问题,使用的是 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;
}
}

  效果图:

  

file 多次上传附件功能完善的更多相关文章

  1. C# fckeditor添加上传附件功能

    最近在维护系统时,要把fckediotr加上上传附件功能,好久没有用fckeditor了,现在都已经改名字,不叫这个了. 修改统计器下面的fckconfig.js,方法如下: 1.把FCKConfig ...

  2. Discuz模拟批量上传附件发帖

    简介 对于很多用discuz做资源下载站来说,一个个上传附件,发帖是很繁琐的过程.如果需要批量上传附件发帖,就需要去模拟discuz 上传附件的流程. 模拟上传 discuz 附件逻辑 dz附件储存在 ...

  3. discuz 模拟批量上传附件发帖

    discuz 模拟批量上传附件发帖 简介 对于很多用discuz做资源下载站来说,一个个上传附件,发帖是很繁琐的过程.如果需要批量上传附件发帖,就需要去模拟discuz 上传附件的流程. 插件地址 h ...

  4. React项目中使用wangeditor以及扩展上传附件菜单

    在最近的工作中需要用到富文本编辑器,结合项目的UI样式以及业务需求,选择了wangEditor.另外在使用的过程中发现wangEditor只有上传图片和视频的功能,没有上传文本附件的功能,所以需要对其 ...

  5. 怎样解决asp.net.mvc上传附件超过长度问题?

    最近,在做一个上传附件功能,但是文件超过4M,就报上传的文件超过长度问题

  6. file 自定义上传附件并展示缩略图

    效果图镇楼..   写的有点乱.上传一个实例供大家参考--附件下载地址如何下: https://files.cnblogs.com/files/fchx91/uploadFiles.rar 2019- ...

  7. salesforce零基础学习(八十九)使用 input type=file 以及RemoteAction方式上传附件

    在classic环境中,salesforce提供了<apex:inputFile>标签用来实现附件的上传以及内容获取.salesforce 零基础学习(二十四)解析csv格式内容中有类似的 ...

  8. JavaWeb实现文件上传下载功能实例解析

    转:http://www.cnblogs.com/xdp-gacl/p/4200090.html JavaWeb实现文件上传下载功能实例解析 在Web应用系统开发中,文件上传和下载功能是非常常用的功能 ...

  9. webservice跨服务器上传附件

    最近一个项目,用到文件上传功能,本来简单地使用upload控件直接post到服务器保存,简单实现了.后来考虑到分布是部署,静态附件.图片等内容要单独服务器(命名为B服务器,一台,192.168.103 ...

随机推荐

  1. TestLink-Windows安装教程

    TestLink-Windows安装教程 QQ群交流:585499566 一.这篇文章的目的 以后工作中要使用Testlink来管理测试的流程,需要在本地或者Testlink服务器上练习使用,在个人本 ...

  2. [20190423]那个更快的疑问3.txt

    [20190423]那个更快的疑问3.txt --//前一阵子,做了11g在单表单条记录唯一索引扫描的测试,摘要如下:--//参考链接:http://blog.itpub.net/267265/vie ...

  3. 好程序员web前端分享12个CSS高级技巧汇总

    好程序员web前端分享下面这些CSS高级技巧,一般人我可不告诉他哦. 使用 :not() 在菜单上应用/取消应用边框 给body添加行高 所有一切都垂直居中 逗号分隔的列表 使用负的 nth-chil ...

  4. DRF限制访问频次

    官方文档:https://www.django-rest-framework.org/api-guide/throttling/ 1.什么场景下需要限制访问频次呢? 1)防爬虫:爬虫可能会在短时间内大 ...

  5. Laravel-任务调度

    简介Cron 是 UNIX.SOLARIS.LINUX 下的一个十分有用的工具,通过 Cron 脚本能使计划任务定期地在系统后台自动运行.这种计划任务在 UNIX.SOLARIS.LINUX下术语为 ...

  6. vue实现懒加载

  7. 2019-04-10 集成JasperReport

    1. 报表的制作过程为 ① 制作.jrxml报表模板文件,并编译成.jasper ② 代码处理.jasper文件并填充数据进行输出 2. 一开始是打算使用iReport作为模板制作工具的,但是有以下局 ...

  8. MySQL之B+树索引(转自掘金小册 MySQL是怎样运行的,版权归作者所有!)

    每个索引都对应一棵B+树,B+树分为好多层,最下边一层是叶子节点,其余的是内节点.所有用户记录都存储在B+树的叶子节点,所有目录项记录都存储在内节点. InnoDB存储引擎会自动为主键(如果没有它会自 ...

  9. java篇 之 java概念

    Jvm:java虚拟机,让java拥有跨平台的能力,一次编写,导出运行 Java优点:提供了一个解释性环境(多线程,可执行程序跨平台,加快开发,支持动态更新) 没有指针,有垃圾将回收器(回收内存) 执 ...

  10. django下的xadmin相关设置

    后台设置中文在 settings.py LANGUAGE_CODE = 'zh-hans' TIME_ZONE = 'Asia/Shanghai' USE_I18N = True USE_L10N = ...