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 解析json的代码
Dec 16 Javascript
html向js方法传递参数具体实现
Aug 08 Javascript
jquery插件开发之实现md5插件
Mar 17 Javascript
javascript实现des解密加密全过程
Apr 03 Javascript
jquery中each方法示例和常用选择器
Jul 08 Javascript
js监听鼠标事件控制textarea输入字符串的个数
Sep 29 Javascript
jquery实现点击查看更多内容控制段落文字展开折叠效果
Aug 06 Javascript
Javascript设计模式之观察者模式(推荐)
Mar 29 Javascript
详解webpack分离css单独打包
Jun 21 Javascript
详解vue渲染从后台获取的json数据
Jul 06 Javascript
jQuery实现的监听导航滚动置顶状态功能示例
Jul 23 jQuery
Nuxt 项目性能优化调研分析
Nov 07 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
js 鼠标点击事件及其它捕获
2009/06/04 Javascript
javascript 隔行换色函数代码
2010/10/24 Javascript
JQuery获取文本框中字符长度的代码
2011/09/29 Javascript
JS 实现获取打开一个界面中输入的值
2013/03/19 Javascript
javascript实现按回车键切换焦点
2015/02/09 Javascript
JS简单循环遍历json数组的方法
2016/04/22 Javascript
js select实现省市区联动选择
2020/04/17 Javascript
Node.js检测端口(port)是否被占用的简单示例
2016/09/29 Javascript
jQuery ajax MD5实现用户注册即时验证功能
2016/10/11 Javascript
AngularJS打开页面隐藏显示表达式用法示例
2016/12/25 Javascript
NodeJs中express框架的send()方法简介
2017/06/20 NodeJs
Vue.js列表渲染绑定jQuery插件的正确姿势
2017/06/29 jQuery
vue登录注册及token验证实现代码
2017/12/14 Javascript
vue 登录滑动验证实现代码
2018/08/24 Javascript
利用angular自动编译andriod APK的绕坑经历分享
2019/03/08 Javascript
解决layui table表单提示数据接口请求异常的问题
2019/09/24 Javascript
React组件设计模式之组合组件应用实例分析
2020/04/29 Javascript
json.stringify()与json.parse()的区别以及用处
2021/01/25 Javascript
Vue多选列表组件深入详解
2021/03/02 Vue.js
[16:19]教你分分钟做大人——风暴之灵
2015/03/11 DOTA
Python中的random()方法的使用介绍
2015/05/15 Python
Python循环语句之break与continue的用法
2015/10/14 Python
Python中的异常处理相关语句基础学习笔记
2016/07/11 Python
详解常用查找数据结构及算法(Python实现)
2016/12/09 Python
pandas apply 函数 实现多进程的示例讲解
2018/04/20 Python
python中csv文件的若干读写方法小结
2018/07/04 Python
python通过tcp发送xml报文的方法
2018/12/28 Python
opencv python统计及绘制直方图的方法
2019/01/21 Python
如何用python处理excel表格
2020/06/09 Python
.NET面试问题集
2015/12/08 面试题
企业精细化管理实施方案
2014/03/23 职场文书
公务员个人考察材料
2014/12/23 职场文书
结婚通知短信怎么写
2015/04/17 职场文书
2015年远程教育工作总结
2015/05/20 职场文书
毕业证明模板
2015/06/19 职场文书
html5移动端禁止长按图片保存的实现
2021/04/20 HTML / CSS