<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<script>
var Browser = new Object();
Browser.isMozilla = (typeof document.implementation != 'undefined') && (typeof document.implementation.createDocument != 'undefined') && (typeof HTMLDocument != 'undefined');
Browser.isIE = window.ActiveXObject ? true : false;
Browser.isFirefox = (navigator.userAgent.toLowerCase().indexOf("firefox") != - 1);
Browser.isSafari = (navigator.userAgent.toLowerCase().indexOf("safari") != - 1);
Browser.isOpera = (navigator.userAgent.toLowerCase().indexOf("opera") != - 1);
//返回行的下标
function rowindex(tr)
{
if (Browser.isIE)
{
return tr.rowIndex;
}
else
{
table = tr.parentNode.parentNode;
for (i = 0; i < table.rows.length; i ++ )
{
if (table.rows[i] == tr)
{
return i;
}
}
}
}
function addImg(obj)
{
var src = obj.parentNode.parentNode;
var idx = rowindex(src);
var tbl = document.getElementById('gallery-table');
var row = tbl.insertRow(idx + 1);
var cell = row.insertCell(-1);
cell.innerHTML = src.cells[0].innerHTML.replace(/(.*)(addImg)(.*)(\[)(\+)/i, "$1removeImg$3$4-");
}
/**
* 删除图片上传
*/
function removeImg(obj)
{
var row = rowindex(obj.parentNode.parentNode);
var tbl = document.getElementById('gallery-table');
tbl.deleteRow(row);
}
</script>
</head>
<body>
<table width="90%" id="gallery-table" style="display:" align="center">
<tr>
<td>
<a href="javascript:;" onclick="addImg(this)">[+]</a>
图片描述 <input type="text" name="img_desc[]" size="20" />
上传图片 <input type="file" name="img_url[]" />
</td>
</tr>
</table>
</body>
</html>
分享到：
相关推荐
4. 动画效果：在添加和删除图片时，使用Android的动画API如`ObjectAnimator`或`ViewPropertyAnimator`来增加交互性。 在提供的文件列表中，`app-debug.apk`是Android应用的安装包，可能包含了实现以上功能的应用...
总的来说，WebUploader提供了丰富的API和事件，使得前端图片上传功能的实现变得简单而强大。结合PHP或其他后端语言，我们可以构建出功能完善的图片上传系统，满足用户的各种需求。在实际开发中，还需要注意安全问题...
因为工作需求最近研究了图片上传的代码，这个demo是自己整理后应用的，添加图片是仿照微信上传图片时的弹出框，包含拍照和本地图片选取两部分，并且无论是本地选择相片还是拍照上传相片都带有裁剪功能，上传的图片...
"图片上传服务器添加数字水印"这个主题涉及到的关键技术主要包括图片上传处理、服务器端编程（此处使用ASP.NET）以及数字水印的应用。 1. **图片上传处理**： 在Web应用中，图片上传功能是用户交互的重要部分，它...
这是一款使用weui框架的前端ui技术，制作的一款可以应用于图片上传、预览与删除的代码，在代码中，我做了图片上传个数的限制，你只需取得存储文件的数组，即可得到图片文件，此代码实现的功能可以应用于所有的web...
本教程将深入探讨如何实现一个功能完善的图片上传系统，它允许用户上传多张图片并在页面上显示，同时提供删除和指定上传的功能。这一功能对于提高用户体验至关重要，因为它让用户能够方便地管理他们上传的内容。 ...
首先，需要在编辑器配置中启用多图上传功能，然后设置上传的URL，这个URL指向处理图片上传的服务器端脚本。在用户选择图片后，编辑器会自动将图片数据发送到该URL，并期待返回包含上传图片信息的结果。 二、去除...
总结起来，实现`jQuery`多图片上传并允许用户添加删除图片的关键步骤包括：设置`<input type="file">`的`multiple`属性、监听文件选择事件、预览图片、添加删除图片功能、以及使用Ajax进行上传。在Android环境下，...
在Web开发中，常常会遇到用户需要上传多个文件的情况，尤其是在图片上传功能的设计上。为了提供更好的用户体验，动态添加和删除上传控件的功能变得尤为重要。本文将详细介绍如何利用JavaScript实现动态添加和删除...
6. **上传图片**：如果需要将图片上传到服务器，可以使用`HttpURLConnection`、`OkHttp`或`Retrofit`等网络库，配合`MultipartEntityBuilder`或`RequestBody`来处理图片数据。 7. **事件监听**：为每个动态添加的...
在EXT中，处理图片上传、删除和显示是一项常见的任务，特别是在构建涉及多媒体内容的Web应用时。本篇文章将深入探讨EXT如何与PHP配合，实现这些功能。 1. **图片上传** 在EXT中，我们可以使用`Ext.form.FileField`...
这个“HTML5多张图片上传删除代码.zip”文件应该包含了一个实现这一功能的源码示例。下面将详细介绍HTML5中用于图片上传和删除的关键技术。 首先，HTML5中的`<input type="file">`元素允许用户选择本地文件。通过...
"FCKeditor添加删除上传文件（图片）的功能" FCKeditor 是一款功能强大的开源在线文本编辑器(DHTML editor)，它使用户在 web 上可以使用类似微软 Word 的桌面文本编辑器的许多强大功能。添加删除上传文件（图片）的...
传统的单张图片上传方式可能会耗费用户大量时间，尤其是在需要上传多张图片时。通过批量上传功能，用户可以一次性选择多张图片，大大节省了操作时间。 "支持多浏览器"意味着该功能具有良好的跨平台兼容性。开发人员...
本项目是基于C#语言实现的一个图片管理器，具备图片上传、删除和管理的基本功能。以下是对这些核心功能的详细解释： 1. **图片上传**：在C#中，图片上传通常涉及文件输入输出（IO）操作，用户界面（UI）设计以及...
接下来，我们需要编写JavaScript代码来处理图片上传、预览和删除。首先，监听文件输入元素的`change`事件，获取用户选择的图片文件： ```javascript var $uploaderInput = $('.weui-uploader__input'); $...
在Android应用开发中，实现多张图片上传及删除功能是一项常见的需求，特别是在社交、电商或者图像编辑类的应用中。这个项目可能包含一个自定义的图片选择器，允许用户选择多张图片，并且提供了图片预览和删除的功能...
本压缩包“手机移动端多图片上传删除js代码.rar”提供了一个解决此类问题的解决方案，特别针对Android和iOS系统的差异性进行了优化。以下是关于这个功能的详细知识点： 1. **多图片选择与上传** - **multiple属性*...
总结，通过Spring Boot、MyBatis的集成，我们可以高效地实现图片上传和删除功能。这个过程中涉及了文件上传、数据库操作、自定义配置、Controller处理、Service逻辑以及前端交互等多个环节，涵盖了Spring Boot应用...
例如，我们可以为每个插入的图片添加一个唯一的ID，当用户点击图片时，通过这个ID找到对应的图片并从OSS中删除： ```javascript var imageIds = []; // 在插入图片时记录ID $('#summernote').summernote('codeHook...