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

 更新时间:2016年10月24日 08:47:53   转载 作者:烽火戏诸诸诸侯  
这篇文章主要为大家详细介绍了js实现上传文件添加和删除文件选择框 ,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文这里给大家说个用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框的内容>

第二个案例

文件上传,删除效果图:

刚开始:

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

点击按钮“删除”后:

实现代码:

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

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

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

相关文章

  • 微信小程序实现签字功能

    微信小程序实现签字功能

    这篇文章主要介绍了微信小程序实现签字功能,本文通过效果图展示,实例代码讲解的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-12-12
  • 微信小程序中遇到的iOS兼容性问题小结

    微信小程序中遇到的iOS兼容性问题小结

    这篇文章主要给大家介绍了关于微信小程序中遇到的一些iOS兼容性问题,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2018-11-11
  • Table隔行变色的JavaScript代码

    Table隔行变色的JavaScript代码

    用js实现的table隔行变色,鼠标放上去有变色显示,需要的朋友可以参考下。
    2011-01-01
  • Javascript中 带名 匿名 箭头函数的重要区别(推荐)

    Javascript中 带名 匿名 箭头函数的重要区别(推荐)

    这篇文章主要介绍了Javascript中 带名 匿名 箭头函数的重要区别,非常不错,具有参考借鉴价值,需要的朋友参考下吧
    2017-01-01
  • js实现瀑布流的一种简单方法实例分享

    js实现瀑布流的一种简单方法实例分享

    现在说瀑布流式布局似乎有点晚了,但是每一项技术都是向着“精”和“简”的方向在不断发展,在发展到极致之前,需要一个相当漫长的过程,因此,从这个角度来说,当瀑布流被应用得越来越多的时候,反而更应该讨论它,讨论如何将它改善
    2013-11-11
  • 利用JS实现浏览器的title闪烁

    利用JS实现浏览器的title闪烁

    经常可以看见的title里面的消息提示,下面是JS的一种实现方法,需要的朋友可以参考下
    2013-07-07
  • JS区分浏览器页面是刷新还是关闭

    JS区分浏览器页面是刷新还是关闭

    在web开发中我们经常各种各样的需求。今天小编给大家介绍JS区分浏览器页面是刷新还是关闭标签页,非常实用,感兴趣的童鞋参考下吧
    2016-04-04
  • AngularJS实现textarea记录只能输入规定数量的字符并显示

    AngularJS实现textarea记录只能输入规定数量的字符并显示

    AngularJS 是一个 MV* 框架,最适于开发客户端的单页面应用。它不是个功能库,而是用来开发动态网页的框架。接下来通过本文给大家介绍AngularJS实现textarea记录只能输入规定数量的字符并显示的相关内容,需要的朋友参考下吧
    2016-04-04
  • 前端防止用户重复提交js实现代码示例

    前端防止用户重复提交js实现代码示例

    这篇文章主要给大家介绍了关于前端防止用户重复提交js实现的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起看看吧
    2018-09-09
  • Bootstrap布局组件教程之Bootstrap下拉菜单

    Bootstrap布局组件教程之Bootstrap下拉菜单

    这篇文章主要介绍了Bootstrap布局组件教程之Bootstrap下拉菜单的相关资料,非常不错具有参考借鉴价值,需要的朋友可以参考下
    2016-06-06

最新评论