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 相关文章推荐
Ext面向对象开发实践(续)
Nov 18 Javascript
关于js获取radio和select的属性并控制的代码
May 12 Javascript
javascript封装 Cookie 应用接口
Aug 07 Javascript
3种js实现string的substring方法
Nov 09 Javascript
TypeScript Type Innference(类型判断)
Mar 10 Javascript
JS控制伪元素的方法汇总
Apr 06 Javascript
laypage分页控件使用实例详解
May 19 Javascript
javascript实现消灭星星小游戏简单版
Nov 15 Javascript
jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】
Apr 28 jQuery
jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一
May 26 jQuery
Vue登录拦截 登录后继续跳转指定页面的操作
Aug 04 Javascript
详解Node.js如何处理ES6模块
May 15 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调用dll的实例操作动画与代码分享
2012/08/14 PHP
PHP 基于Yii框架中使用smarty模板的方法详解
2013/06/13 PHP
PHP抓取、分析国内视频网站的视频信息工具类
2014/04/02 PHP
ECMall支持SSL连接邮件服务器的配置方法详解
2014/05/19 PHP
PHP解压tar.gz格式文件的方法
2016/02/14 PHP
PhpStorm terminal无法输入命令的解决方法
2016/10/09 PHP
PHP实现权限管理功能示例
2017/09/22 PHP
PHP命令Command模式用法实例分析
2018/08/08 PHP
ThinkPHP5.1的权限控制怎么写?分享一个AUTH权限控制
2021/03/09 PHP
基于jquery用于查询操作的实现代码
2010/05/10 Javascript
JQERY limittext 插件0.2版(长内容限制显示)
2010/08/27 Javascript
单击按钮显示隐藏子菜单经典案例
2013/01/04 Javascript
js实现仿百度瀑布流的方法
2015/02/05 Javascript
jQuery Validate插件实现表单验证
2016/08/19 Javascript
如何防止INPUT按回车自动提交表单FORM
2016/12/06 Javascript
为什么我们要做三份 Webpack 配置文件
2017/09/18 Javascript
Three.js基础学习之场景对象
2017/09/27 Javascript
vue 文件目录结构详解
2017/11/24 Javascript
nodejs基于express实现文件上传的方法
2018/03/19 NodeJs
vue实现自定义多选与单选的答题功能
2018/07/05 Javascript
[11:12]2018DOTA2国际邀请赛寻真——绿色长城OpTic
2018/08/10 DOTA
Python中关键字is与==的区别简述
2014/07/31 Python
跟老齐学Python之网站的结构
2014/10/24 Python
Python使用Django实现博客系统完整版
2020/09/29 Python
Python 删除连续出现的指定字符的实例
2018/06/29 Python
python实现网站微信登录的示例代码
2019/09/18 Python
python迭代器常见用法实例分析
2019/11/22 Python
python中复数的共轭复数知识点总结
2020/12/06 Python
python中实现词云图的示例
2020/12/19 Python
匡威英国官网:Converse英国
2018/12/02 全球购物
介绍java中初始化块的使用
2012/09/11 面试题
毕业证丢失证明
2014/01/15 职场文书
转预备党员政审材料
2014/02/06 职场文书
高中国旗下的演讲稿
2014/08/28 职场文书
毕业横幅标语
2014/10/08 职场文书
浅谈Redis的事件驱动模型
2022/05/30 Redis