js实现上传文件添加和删除文件选择框


Posted in Javascript onOctober 24, 2016

本文这里给大家说个用javascript实现的很实用的功能,是在上传附件的时候,可以动态地添加和删除文件选择框,然后一次性上传。

从理论上看,实现起来比较容易,但实际工作的时候还是遇到两个难点,这些难点归结起来都是一个原因造成的,那就是浏览器的兼容性。在脚本中要用到两个函数:insertAdjacentHTML和removeChild,而恰好这两个函数在Firefox下都不能正常使用。几乎花费了一天的时候,在网上搜索着解决的方法,还好被找到了,也让我大松一口气。

具体两个函数是这样的:

<script type="text/javascript">
  //删除文件选择框
  function removeFile(id) {
    var new_tr = id.parentNode;
    try {
      //new_tr.removeNode(true);
      // just ie , not w3c;

      // other idea
      var tmp = new_tr.parentNode;
      // 为了在ie和firefox下都能正常使用,就要用另一个方法代替,最取上一层的父结点,然后remove.
      tmp.removeChild(new_tr);

     } catch(e) {}
  }
  
  //添加文件选择框
  function addFile(id)
  {
   var str = '<div><input type="file" runat="server" name="file" onKeyDown="this.blur();" oncontextmenu="return false" /><input type="button" value="删除" style="height:22px;" onclick="removeFile(this)" /></div>'
   insertHtml("beforeend",document.getElementById(id),str);
   }
</script>

页面上这样引用:

<div>
    <input type="button" value="添加附件(Add)" onclick="addFile('myfile')">
    </div>
  <div id="myfile">
</div>

在addFile函数中引用了另一个函数:insertHtml,这个函数主要是针对insertAdjacentHTML在firefox下无效的情况重写的,具体可以通过搜索insertAdjacentHTML找到。

PS:清除file框的内容

<input  type=file  name=ttt>    
 <input  type=button  onclick="ttt.select();document.execCommand('Delete');"   value=清除file框的内容>

第二个案例

文件上传,删除效果图:

刚开始:

js实现上传文件添加和删除文件选择框

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

js实现上传文件添加和删除文件选择框

点击按钮“删除”后:

js实现上传文件添加和删除文件选择框

实现代码:

<!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>

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript中万恶的function实例分析
May 25 Javascript
js动态生成指定行数的表格
Jul 11 Javascript
利用cookie记住背景颜色示例代码
Nov 04 Javascript
解析JavaScript中instanceof对于不同的构造器或许都返回true
Dec 03 Javascript
js取float型小数点后两位数的方法
Jan 18 Javascript
简单js代码实现selece二级联动(推荐)
Feb 18 Javascript
jQuery子窗体取得父窗体元素的方法
May 11 Javascript
angularjs客户端实现压缩图片文件并上传实例
Jul 06 Javascript
纯CSS3代码实现滑动开关效果
Aug 19 Javascript
vue.js学习笔记之v-bind和v-on解析
May 03 Javascript
微信小程序日历弹窗选择器代码实例
May 09 Javascript
Easyui 去除jquery-easui tab页div自带滚动条的方法
May 10 jQuery
JS取数字小数点后两位或n位的简单方法
Oct 24 #Javascript
第一次接触Bootstrap框架
Oct 24 #Javascript
Node.js Sequelize如何实现数据库的读写分离
Oct 23 #Javascript
JavaScript数组去重的几种方法效率测试
Oct 23 #Javascript
Javascript 实现简单计算器实例代码
Oct 23 #Javascript
JavaScript页面实时显示当前时间实例代码
Oct 23 #Javascript
jquery 实现回车登录详解及实例代码
Oct 23 #Javascript
You might like
php minixml详解
2008/07/19 PHP
PHP7多线程搭建教程
2017/04/21 PHP
javascript算法学习(直接插入排序)
2011/04/12 Javascript
SyntaxHighlighter语法高亮插件使用说明
2011/08/14 Javascript
详解强大的jQuery选择器之基本选择器、层次选择器
2012/02/07 Javascript
JavaScript判断访问的来源是手机还是电脑,用的哪种浏览器
2013/12/12 Javascript
Jquery的Tabs内容轮换效果实现代码,几行搞定
2014/02/12 Javascript
Javascript中浮点数相乘的一个解决方法
2014/06/03 Javascript
实现高性能JavaScript之执行与加载
2016/01/30 Javascript
JS使用cookie实现只出现一次的广告代码效果
2017/04/22 Javascript
vue调试工具vue-devtools安装及使用方法
2018/11/07 Javascript
JS重学系列之聊聊new操作符
2019/03/04 Javascript
详解JavaScript中的数据类型,以及检测数据类型的方法
2020/09/17 Javascript
vue实现验证用户名是否可用
2021/01/20 Vue.js
Vue+Bootstrap实现简易学生管理系统
2021/02/09 Vue.js
[01:07:57]DOTA2-DPC中国联赛 正赛 Ehome vs Magma BO3 第二场 1月19日
2021/03/11 DOTA
python 根据正则表达式提取指定的内容实例详解
2016/12/04 Python
Python数据结构之顺序表的实现代码示例
2017/11/15 Python
Python读取Json字典写入Excel表格的方法
2018/01/03 Python
解决Matplotlib图表不能在Pycharm中显示的问题
2018/05/24 Python
Python爬虫爬取新浪微博内容示例【基于代理IP】
2018/08/03 Python
python实现图片彩色转化为素描
2019/01/15 Python
Python发展简史 Python来历
2019/05/14 Python
Python字典添加,删除,查询等相关操作方法详解
2020/02/07 Python
Python求两个字符串最长公共子序列代码实例
2020/03/05 Python
深入理解Python变量的数据类型和存储
2021/02/01 Python
SmartBuyGlasses德国:购买太阳镜和眼镜
2019/08/20 全球购物
莫斯科的韩国化妆品店:Sifo
2019/12/04 全球购物
在DELPHI中调用存储过程和使用内嵌SQL哪种方式更好
2016/11/22 面试题
yy结婚证婚词
2014/01/10 职场文书
给校长的建议书600字
2014/05/15 职场文书
党员转正大会主持词
2015/07/02 职场文书
2016年教师师德师风承诺书
2016/03/25 职场文书
深入讲解数据库中Decimal类型的使用以及实现方法
2022/02/15 MySQL
python 详解turtle画爱心代码
2022/02/15 Python
Redis实战之Lettuce的使用技巧详解
2022/12/24 Redis