`
qzxfl008
  • 浏览: 78795 次
  • 性别: Icon_minigender_1
  • 来自: 浙江
社区版块
存档分类
最新评论

javascript 实现多文件选择

javascript 
阅读更多 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.6.4.js"></script>
<script type="text/javascript">
	var addMore = function()
	{
		var div = document.getElementById("div1");
		var br = document.createElement("br");
		var input = document.createElement("input");
		var button = document.createElement("input");
		
		input.setAttribute("type","file");
		
		button.setAttribute("type","button");
		button.setAttribute("value","remove");
		
		button.onclick = function()
		{
			div.removeChild(br);
			div.removeChild(input);
			div.removeChild(button);
		}
		
		div.appendChild(br);
		div.appendChild(input);
		div.appendChild(button);
		}

//jquery实现
	$(function()
			   {
					$("input[type=button]").click(function()
														   {
															   var br = $("<br>");
															   var input = $("<input type='file'> ");
															   var button = $("<input type='button' value='remove'>");
															   
															   $("#div1").append(br).append(input).append(button);
															   button.click(function()
																					 {
																						 //$().remove();
																						 br.remove();
																						 input.remove();
																						 button.remove();
																					});
															 });
				});

</script>
</head>

<body>

<input type="file" /><input type="button" value="more" onclick="addMore();"/>

<div id="div1"></div>
</body>
</html>

效果图：

  • 大小: 11.6 KB
分享到：
| 页面高亮显示问题
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    使用JavaScript实现一个本地文件选择器功能

    总结一下，使用JavaScript实现本地文件选择器功能主要涉及HTML5的`&lt;input type="file"&gt;`，`FileList`，`FileReader`，以及可能的`fetch`或`XMLHttpRequest`。理解并掌握这些API，就能灵活地处理用户选择的本地文件，...

    JavaScript实现写入文件到本地的方法【基于FileSaver.js插件】.docx

    由于 JavaScript 基于安全考虑，不允许直接操作本地文件，因此需要使用插件或其他方式来实现文件保存。基于 FileSaver.js 插件实现保存文件到本地的方法是目前最流行和最可靠的方法之一。 FileSaver.js 插件是一个...

    javascript实现的日期选择器

    在JavaScript实现的日期选择器中，关键知识点可能包括： 1. **事件监听**：利用`addEventListener`或`onclick`等方法响应用户的点击或滚动行为，触发相应的日期选取动作。 2. **DOM操作**：使用`document....

    javaScript实现另存为功能

    在JavaScript中实现“另存为”功能并不直接，因为出于安全考虑，浏览器并不提供直接调用“另存为”对话框的API。但是，我们可以通过一些技巧来模拟这一行为。以下是一些关键知识点： 1. **创建Blob对象**：首先，...

    使用JavaScript实现Web程序中多个文本框的批量选择、批量修改

    最近，我使用纯Javascript实现了一个批量修改文本框中的数据的功能，拖动鼠标即可选择页面上（包括GridView中）多个文本框，然后会自动弹出对话框要求用户输入新值。实现方法对TextBox没有侵入性，也不需要修改现有...

    基于python+JavaScript实现显示文件的二进制图表(软件构造大作业).zip

    基于python+JavaScript实现显示文件的二进制图表(软件构造大作业).zip基于基于python+JavaScript实现显示文件的二进制图表(软件构造大作业).zip基于python+JavaScript实现显示文件的二进制图表(软件构造大作业).zip...

    Javascript实现word文件套打支持多表格

    标题中的“Javascript实现word文件套打支持多表格”是指使用JavaScript技术来处理Word文档，并且能够处理其中包含的多个表格。这种技术在某些场景下非常有用，比如批量生成报告、自定义模板等。下面我们将详细探讨这...

    Javascript 支持大文件加解密实现

    Javascript 支持大文件加解密算法 可进行文件切割加密解密上传下载 加密算法采用CryptoJS v3 1 2 开源的算法 我用的是AES CFB nopadding 注意要将所需的js文件包含到你的网页中 key的编码方式要一致 我用的是larting...

    javascript实现文件加密上传

    在JavaScript中实现文件加密传输通常涉及以下步骤： 选择文件：使用HTML的标签允许用户选择要加密的文件。 读取文件内容：使用FileReader API读取文件内容。 加密文件内容：使用Web Crypto API对文件内容进行加密...

    javascript 实现的文件拷贝(能够循环遍历所选文件夹)

    下面将详细讲解如何利用JavaScript实现文件或文件夹的遍历与复制。 首先，理解JavaScript在浏览器环境中的限制是至关重要的。由于安全原因，JavaScript在浏览器中无法直接访问用户的文件系统，因此不能直接读取、...

    一个基于Javascript+PHP 实现的多文件上传程序例子

    本示例提供了一个使用JavaScript和PHP实现的多文件上传程序，这将帮助开发者理解如何处理用户通过浏览器上传多个文件的流程。 首先，让我们详细探讨JavaScript的角色。在客户端，JavaScript主要负责用户交互和文件...

    Html和JavaScript实现文件保存

    Html和JavaScript实现文件保存

    javascript读取本地文件和目录方法详解

    JavaScript是网页制作中离不开的脚本语言...其实，要在Javascript中实现文件操作功能，主要就是依靠FileSystemobject对象。在详细介绍FileSystemobject对象的各个属性和方法的使用细节前，先来看看这个对象包括哪些相关

    javascript+HTML5 多文件上传（插件）多进度条显示

    在本项目中，"javascript+HTML5 多文件上传（插件）多进度条显示"是一个实现这一功能的实例，它允许用户选择并上传多个文件，并在上传过程中实时显示每个文件及整体的上传进度。下面将详细介绍这个技术实现的关键...

    javascript 实现限制上传文件大小

    javascript 实现限制上传文件大小

    JavaScript实现的Windows资源管理器

    JavaScript实现的Windows资源管理器是一种基于Web技术的文件管理和操作工具，它利用JavaScript语言的强大功能，为用户提供了类似于Windows操作系统中的资源管理器体验。在浏览器环境下，用户可以通过这个应用查看和...

    利用css＋javascript实现的一个日期选择器代码

    【标题】：“利用css＋javascript实现的一个日期选择器代码”涉及的核心知识点主要集中在CSS样式设计和JavaScript编程上，用于创建一个交互式的日期选择组件。日期选择器是网页表单中常见的一种元素，允许用户方便地...

    全国城市选择（JavaScript实现）

    下面将详细介绍这个JavaScript实现的全国城市选择器的知识点。 首先，`area.html`文件是网页的主体部分，它可能包含HTML结构，如选择器的DOM元素（可能是`&lt;select&gt;`标签的嵌套结构），以及用来加载JavaScript脚本的...

    开源的多文件上传采用JavaScript插件

    综合以上信息，我们可以了解到，这个开源的多文件上传插件Fancyupload使用JavaScript和Mootools库，配合Flash或HTML5技术实现文件选择和上传，同时具备错误修复和跨平台后端支持的能力。通过解压后的文件，我们可以...

Magicbox
Global site tag (gtag.js) - Google Analytics