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 相关文章推荐
关于页面嵌入swf覆盖div层的问题的解决方法
Feb 11 Javascript
javascript断点调试心得分享
Apr 23 Javascript
原生 JS Ajax,GET和POST 请求实例代码
Jun 08 Javascript
用js实现博客打赏功能
Oct 24 Javascript
常用的javascript设计模式
Jan 11 Javascript
Javascript封装id、class与元素选择器方法示例
Mar 13 Javascript
js实现添加删除表格(两种方法)
Apr 27 Javascript
vue 封装自定义组件之tabal列表编辑单元格组件实例代码
Sep 07 Javascript
js定时器+简单的动画效果实例
Nov 10 Javascript
深入浅析Vue.js中 computed和methods不同机制
Mar 22 Javascript
JS 实现获取验证码 倒计时功能
Oct 29 Javascript
js实现表格单列按字母排序
Aug 12 Javascript
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 获取完整url地址
2008/12/20 PHP
Linux环境下搭建php开发环境的操作步骤
2013/06/17 PHP
CURL状态码列表(详细)
2013/06/27 PHP
分享下页面关键字抓取components.arrow.com站点代码
2014/01/30 PHP
php实现的ping端口函数实例
2014/11/12 PHP
将PHP程序中返回的JSON格式数据用gzip压缩输出的方法
2016/03/03 PHP
Ubuntu server 11.04安装memcache及php使用memcache来存储session的方法
2016/05/31 PHP
js作用域及作用域链概念理解及使用
2013/04/15 Javascript
jquery获取被勾选的checked(选中)的那一行的3列和4列的值
2013/07/04 Javascript
jQuery获得内容和属性方法及示例
2013/12/02 Javascript
jquerymobile局部渲染的各种刷新方法小结
2014/03/05 Javascript
js中的onchange和onpropertychange (onchange无效的解决方法)
2014/03/08 Javascript
简单谈谈javascript中this的隐式绑定
2016/02/22 Javascript
深入理解JavaScript中的尾调用(Tail Call)
2017/02/07 Javascript
vue2.0 keep-alive最佳实践
2017/07/06 Javascript
详解webpack3编译兼容IE8的正确姿势
2017/12/21 Javascript
浅析vue中常见循环遍历指令的使用 v-for
2018/04/18 Javascript
NodeJS 实现多语言的示例代码
2018/09/11 NodeJs
React 组件中的 bind(this)示例代码
2018/09/16 Javascript
JS简单数组排序操作示例【sort方法】
2019/05/17 Javascript
electron 安装,调试,打包的具体使用
2019/11/06 Javascript
javascript 高级语法之继承的基本使用方法示例
2019/11/11 Javascript
在Vue中创建可重用的 Transition的方法
2020/06/02 Javascript
Python中设置变量访问权限的方法
2015/04/27 Python
Python解析最简单的验证码
2016/01/07 Python
Python Pandas实现数据分组求平均值并填充nan的示例
2019/07/04 Python
python的sys.path模块路径添加方式
2020/03/09 Python
Pyspark获取并处理RDD数据代码实例
2020/03/27 Python
Python爬虫之Spider类用法简单介绍
2020/08/04 Python
法律专业自荐信
2014/06/03 职场文书
村党支部群众路线教育实践活动对照检查材料
2014/09/26 职场文书
校园会短篇的广播稿
2014/10/21 职场文书
先进个人评语大全
2015/01/04 职场文书
交通处罚决定书
2015/06/24 职场文书
干货:我将这样书写我的演讲稿!
2019/05/09 职场文书
优秀范文:《但愿人长久》教学反思3篇
2019/10/24 职场文书