之前解决了一个页面中的单个附件上传问题,使用的是 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. Linux学习历程——Centos 7 ls命令

    一.命令介绍 ls命令用于显示目录中的信息. ----------------------------------------------------------------------------- ...

  2. CRC32明文攻击

    明文攻击是一种较为高效的攻击手段,大致原理是当你不知道一个zip的密码,但是你有zip中的一个已知文件(文件大小要大于12Byte)时, 因为同一个zip压缩包里的所有文件都是使用同一个加密密钥来加密 ...

  3. 测试报告_HTMLTestRunner.py

    (1)模板1下载路径: 链接:https://pan.baidu.com/s/1SydXpWwQd5vDpGlzzhXLfA提取码:3ifp (2)模板二下载路径: 链接:https://pan.ba ...

  4. Docker 容器安装及常用基础命令

    为什么用docker 作为一种新兴的虚拟化方式,Docker 跟传统的虚拟化方式相比具有众多的优势. Docker 在如下几个方面具有较大的优势: 更快速的交付和部署 Docker在整个开发周期都可以 ...

  5. dedecms织梦的不同栏目调用不同banner图的方法

    在做织梦站的时候我们会有不同的栏目,比如联系我们,产品中心等等,banner也不一样,方法如下: 我们可以使用织梦的顶级栏目ID标签,把图片命名成顶级栏目typeid ,代码如下: <img s ...

  6. git常用命令值stash

    git stash(git储藏)可用于以下情形: 发现有一个类是多余的,想删掉它又担心以后需要查看它的代码,想保存它但又不想增加一个脏的提交.这时就可以考虑git stash. 使用git的时候,我们 ...

  7. 一、Log4Net配置

    Core的配置 一.创建core包含控制和视图的项目以及Log4Net引用 二.创建Log4Net配置文件 右击项目->添加文件   Log4Net.config 2 复制以下代码 以下配置可做 ...

  8. sql 查询 以结果集为对象左连接

  9. 使用react全家桶制作博客后台管理系统

    前面的话 笔者在做一个完整的博客上线项目,包括前台.后台.后端接口和服务器配置.本文将详细介绍使用react全家桶制作的博客后台管理系统 概述 该项目是基于react全家桶(React.React-r ...

  10. 【12】Django 中间件

     前戏 我们在前面的课程中已经学会了给视图函数加装饰器来判断是用户是否登录,把没有登录的用户请求跳转到登录页面.我们通过给几个特定视图函数加装饰器实现了这个需求.但是以后添加的视图函数可能也需要加上装 ...