效果图：

刚开始：

点击按钮“选择更多后”，可以添加很多选择文件：

点击按钮“删除”后：

实现代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>选择文件</title>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
div{
margin:10px;
}
</style>


<script>
//当点击添加更多时，增加一个DIV
//先增加两个input

function addFile(){
var fragment=document.createDocumentFragment();
var divNode=document.getElementById("container");

var newDiv=document.createElement("div");
newDiv.setAttribute("id","file");
fragment.appendChild(newDiv);

var newInput=document.createElement("input");
newInput.setAttribute("type","file");
newInput.setAttribute("name","选择文件");
newDiv.appendChild(newInput);

var newInput=document.createElement("input");
newInput.setAttribute("type","button");
newInput.setAttribute("value","删除");
newInput.setAttribute("onclick","delFile()");
newInput.setAttribute("id","1");
newDiv.appendChild(newInput);

divNode.appendChild(fragment);
}
function delFile(){
var divNode=document.getElementById("container");
divNode.removeChild(divNode.firstElementChild);
}
</script>
</head>
<body>
<input type="button" value="选择更多" onclick="addFile()"/>
<div id="container">
<div id="file">
<input type="file" name="选择文件"/>
<input type="button" value="删除" onclick="delFile()" />
</div>
</div>
</body>
</html>

代码瑕疵：！！！！在删除函数中，我选择的是删除第一个元素节点，而不是真正意义上的删除当前按钮，不知道怎么改善，求改正。

js实现文件上传，删除效果的更多相关文章

  1. js获取文件上传进度

    js获取文件上传进度: <input name="file" id="FileUpload" type="file" /> &l ...

  2. Js学习文件上传

    // 文件上传 jQuery(function() { var $ = jQuery, $list = $('#thelist'), $btn = $('#ctlBtn'), state = 'pen ...

  3. 使用ajaxfileupload.js实现文件上传

    ajaxFileUpload是一个异步上传文件的jQuery插件 语法:$.ajaxFileUpload([options]) options参数说明: 1.url  上传处理程序地址. 2,file ...

  4. js多文件上传

    一.HTML 选择文件的时候可以选择多个文件,这个需要我们在input file 里面加入一个属性multiple="multiple" 这样就可以框选文件了 <!DOCTY ...

  5. springmvc环境下使用ajaxfileupload.js进行文件上传

    controller: /* #region */ @RequestMapping(produces = "text/html;charset=UTF-8", value = &q ...

  6. SFTP多文件上传,删除

    公司项目中需要把项目的相关文件上传到服务器的tomcat中,需要在项目中进行以下几步操作: 1.添加项目信息,包括名称,描述,服务器ip,sftp的用户名,密码,端口号等,存在配置,部署,删除等操作 ...

  7. 原生js实现文件上传

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. JS大文件上传断点续传解决方案

    1 背景 用户本地有一份txt或者csv文件,无论是从业务数据库导出.还是其他途径获取,当需要使用蚂蚁的大数据分析工具进行数据加工.挖掘和共创应用的时候,首先要将本地文件上传至ODPS,普通的小文件通 ...

  9. JS大文件上传解决方案

    1 背景 用户本地有一份txt或者csv文件,无论是从业务数据库导出.还是其他途径获取,当需要使用蚂蚁的大数据分析工具进行数据加工.挖掘和共创应用的时候,首先要将本地文件上传至ODPS,普通的小文件通 ...

  10. github 创建网络仓库 ，使用git工具将本地文件上传/删除 --- 心得

    1.前言 使用  git做项目控制版本工具,当然,使用SVN也可以,但是,git让人感觉更先进一些,与GitHub结合,用起来很方便,服务端由官网控制. 而SVN分客户端和服务端,都是个人控制,因此, ...

随机推荐

  1. Java web.xml加载顺序

     web.xml加载过程(步骤): 1.启动WEB项目的时候,容器(如:Tomcat)会去读它的配置文件web.xml.读两个节点:   <listener></listener&g ...

  2. ==和equals()的用法

    先看一段代码: public class TestEqual{ public static void main(String [ ] args){ //基本类型比较 int a = 100; int ...

  3. Android开发艺术探索（一）——Activity的生命周期和启动模式

    Activity的生命周期和启动模式 生命周期有? 1.典型情况下的生命周期—>指有用户参与的情况下,Activity所经过的生命周期改变 2.异常情况下的生命周期—>指Activity被 ...

  4. mongodb基本操作及存储图片显示方案

    先介绍下mongodb的基本操作及使用 第一部:开启安全性验证 如果需要给MongoDB数据库使用安全验证,则需要用--auth开启安全性检查,则只有数据库认证的用户才能执行读写操作,开户安全性检查, ...

  5. HTML5 API 浏览器支持情况检测

    HTML5发展到现在,虽说没有大规模的普及,但在我们日常生活中,也很容易见到了,HTML5的游戏.网站.应用也是层出不穷.而作为前端人员,也应该多了解这些API为以后应用打基础,下面我将给大家介绍 H ...

  6. Unity3D中Prefab

    Prefab概念: Prefab是一种资源类型--存储在项目视图中的一种可反复使用的游戏对象.因而当游戏中须要非常多反复使用的对象.资源等时,Prefab就有了用武之地.它拥有下面特点: 能够放到多个 ...

  7. poj 2081 Recaman&#39;s Sequence

    開始还以为暴力做不出来,须要找规律,找了半天找不出来.原来直接暴力.. 代码例如以下: #include<stdio.h> int a[1000050]; int b[100000000] ...

  8. 二维码URL自己主动辨别Android和ISO设备，以便扫码后倒入不同的下载链接

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. NDK开发之数组操作

    JNI把Java数组当作引用类型来处理,JNI提供了必要的函数来访问和处理Java数组. 下面一个一个来看. 1.创建数组 我们可以使用NewArray函数在原生代码中创建数组实例,其中可以是Int. ...

  10. Android开发之UI更新交互机制与实例解析

    android开发过程中,经常需要更新UI的状态和文案等.这是就需要对UI进行 更新.在android中更新UI一般有三种方法,handler机制.RunOnUiThread方法以及AsyncTask ...