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 相关文章推荐
基于jQuery的倒计时插件代码
May 07 Javascript
用jquery生成二级菜单的实例代码
Jun 24 Javascript
JavaScript之IE的fireEvent方法详细解析
Nov 20 Javascript
javascript获取wx.config内部字段解决微信分享
Mar 09 Javascript
jQuery中的Deferred和promise 的区别
Apr 03 Javascript
javascript稀疏数组(sparse array)和密集数组用法分析
Dec 28 Javascript
jQuery DOM节点的遍历方法小结
Aug 15 jQuery
js实现简单数字变动效果
Nov 06 Javascript
node打造微信个人号机器人的方法示例
Apr 26 Javascript
使用vue根据状态添加列表数据和删除列表数据的实例
Sep 29 Javascript
Vue入门学习笔记【基本概念、对象、过滤器、指令等】
Apr 13 Javascript
JavaScript 异步时序问题
Nov 20 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 程式大小
2006/12/06 PHP
destoon实现调用当前栏目分类及子分类和三级分类的方法
2014/08/21 PHP
PHP使用ob_start生成html页面的方法
2014/11/07 PHP
php+jQuery+Ajax简单实现页面异步刷新
2016/08/08 PHP
php微信开发之音乐回复功能
2018/06/14 PHP
PHP filesize函数用法浅析
2019/02/15 PHP
laravel Model 执行事务的实现
2019/10/10 PHP
jQuery 常见学习网站与参考书
2009/11/09 Javascript
基于jQuery的让非HTML5浏览器支持placeholder属性的代码
2011/05/24 Javascript
jquery实现表格奇数偶数行不同样式(有图为证及实现代码)
2013/01/23 Javascript
Extjs中的GridPanel隐藏列会显示在menuDisabled中解决方法
2013/01/27 Javascript
判断javascript的数据类型(示例代码)
2013/12/11 Javascript
jQuery实现的Div窗口震动特效
2014/06/09 Javascript
javascript DIV实现跟随鼠标移动
2020/03/19 Javascript
学习Javascript面向对象编程之封装
2016/02/23 Javascript
jQuery禁用快捷键例如禁用F5刷新 禁用右键菜单等的简单实现
2016/08/31 Javascript
基于JS实现checkbox全选功能实例代码
2016/10/31 Javascript
使用ionic切换页面卡顿的解决方法
2016/12/16 Javascript
nodejs搭建本地服务器轻松解决跨域问题
2018/03/21 NodeJs
浅谈Vue数据响应思路之数组
2018/11/06 Javascript
快速了解Python中的装饰器
2018/01/11 Python
Python实现重建二叉树的三种方法详解
2018/06/23 Python
Python+Pyqt实现简单GUI电子时钟
2021/02/22 Python
Python3标准库之threading进程中管理并发操作方法
2020/03/30 Python
Python-for循环的内部机制
2020/06/12 Python
selenium切换标签页解决get超时问题的完整代码
2020/08/30 Python
世界各地的当地人的食物体验:Eatwith
2019/07/26 全球购物
大学新生军训感言
2014/02/25 职场文书
计算机专业自荐信范文
2014/05/28 职场文书
匿名检举信范文
2015/03/02 职场文书
大学感恩节活动总结
2015/05/05 职场文书
运动会运动员赞词
2015/07/22 职场文书
公司管理建议书
2015/09/14 职场文书
党章学习心得体会2016
2016/01/14 职场文书
MySQL触发器的使用
2021/05/24 MySQL
蓝牙耳机怎么连接电脑win11? Win11蓝牙耳机连接电脑的技巧
2023/01/09 数码科技