动态调整上传图片功能：添加与删除脚本示例

需积分: 9 119 浏览量更新于2024-09-18 收藏 1KB TXT 举报

本文档主要介绍了如何在HTML页面中实现动态添加和删除上传图片的功能。开发者使用JavaScript来创建一个支持多文件上传的表单，并通过两个函数`addUpload`和`delUpload`来控制这个过程。首先，我们来看`addUpload`函数。该函数在用户点击"Ӹ"链接时被触发，其核心逻辑如下： 1. 检查当前已上传图片的数量是否达到最大限制（由变量`maxfile`定义，默认为5张）。如果已达上限，函数不再执行。 2. 增加计数器`count`，表示已经添加的图片数量。 3. 创建一个新的`<div>`元素，包含一个用于选择文件的`<input type="file">`字段，以及一个用于删除该图片的链接。`<div>`的ID根据`count`自动生成，例如`divUpload1`、`divUpload2`等。 4. 使用`insertAdjacentHTML`方法将新创建的`<div>`插入到页面中的`<div id="uploadContent">`元素之前，即在已有的图片列表下方添加新的上传区域。 `delUpload`函数负责删除指定的上传图片。当用户点击删除链接时，函数会： 1. 减少`count`，表示删除了一个图片。 2. 使用`parentNode.removeChild()`方法移除带有指定`diva` ID的`<div>`元素，从而删除对应的图片输入框和删除链接。整个HTML结构中，有一个表格布局的容器`<table>`，其中包含一个可滚动的`<td>`，用于展示图片上传区域。初始时，页面预设了一个`<div id="div1">`作为默认的上传区域，其余的图片区域会在用户点击"Ӹ"按钮时动态添加。总结来说，这个脚本提供了一种灵活的方式来管理用户的图片上传，允许用户在不超过最大数量的情况下动态添加和删除上传的图片。这对于需要处理大量图片上传的应用场景，如论坛、博客或图片分享平台，是非常实用的功能。

<HTML>
<HEAD>
<title>动态添加/删除HTML元素站长学院 www.pigzz.com</title>
<script language="javascript">
var count= 0 ;
var maxfile = 5;
增加元素
function addUpload() {
if(count >= maxfile) return;//限制最多maxfile个文件框
count++;
//自增id不同的HTML对象，并附加到容器最后
var newDiv = "<div id=divUpload" + count +">"
+ " <input id=file" + count + " type=file size=50 name=upload>"
+ " <a href=javascript:delUpload('divUpload" + count + "');>删除</a>"
+ " </div>";
document.getElementById("uploadContent").insertAdjacentHTML("beforeEnd", newDiv);
}
//删除指定元素
function delUpload(diva) {
count--;
document.getElementById(diva).parentNode.removeChild(document.getElementById(diva));
}
</script>
</HEAD>
<body MS_POSITIONING="GridLayout">
<form id="Form1" method="post" runat="server" enctype="multipart/form-data">
<div>
<table>
<tr>
<td id="tdRrmove" width="2000">

下载后可阅读完整内容，剩余1页未读，立即下载

shishuiwuhen68

粉丝: 0
资源: 2

动态调整上传图片功能：添加与删除脚本示例

多图片上传页面（含动态预览及删除）

可以动态添加图片，支持多张图片同时上传，图片入库，支持多浏览器 生成原图和缩略图

批量上传图片，截图，删除

elementui上传图片删除

jquery图片上传和删除

h5如何实现图片上传后点击并且删除该图片

el-upload多图片上传删除功能

C#WinForm实现一个图片上传框，可实现多张图片上传，上传图片为缩略图，图片可双击查看、可删除

最新资源

可以动态添加图片，支持多张图片同时上传，图片入库，支持多浏览器生成原图和缩略图