javascript实现添加附件功能的方法

在邮件中我们经常用到添加附件，现在简单的应用下：
效果图：

实现原理：
采用table标签的，主要思想：采用table标签方式
1、点击文字之后，就自动创建（原先是自己/创建，现在拿到table对象之后，可以insertRow() insertCell()）创建行和列
2、删除的时候通过父节点来移除
核心代码：

function creatMail(){
   var tab=document.getElementById("tabid");
   var tr=tab.insertRow();//插入一行
   var td=tr.insertCell();//插入一列
   var td2=tr.insertCell();//插入一列
   td.innerHTML="<input type='file' value='选择文件'/> ";
   /* 

   td2.innerHTML="<a href='javascript:void(0)' onclick='Delrows(this)'>删除</a>";
 */
   td2.innerHTML="<img src='11.jpg' alt='删除' onclick='Delrows(this)'>"; 

  }

全部代码如下（tips：仅仅只是实现添加而已）

<!DOCTYPE html>
<html>
 <head>
 <!--主要思想：采用table标签方式
  1,点击文字之后，就自动创建（原先是自己/创建，现在拿到table对象之后，可以insertRow() insertCell()）创建行和列
  2，删除的时候通过父节点来移除
 --> 

 <title>AddMail.html</title> 

 <link rel="stylesheet" type="text/css" href="1.css">
 <script type="text/javascript">
  function creatMail(){
   var tab=document.getElementById("tabid");
   var tr=tab.insertRow();//插入一行
   var td=tr.insertCell();//插入一列
   var td2=tr.insertCell();//插入一列
   td.innerHTML="<input type='file' value='选择文件'/> ";
   /* 

   td2.innerHTML="<a href='javascript:void(0)' onclick='Delrows(this)'>删除</a>";
 */
   td2.innerHTML="<img src='11.jpg' alt='删除' onclick='Delrows(this)'>"; 

  } 

  function Delrows(node){//当前对象是<a>里面 

   var tr=node.parentNode.parentNode;//tr对象
   tr.parentNode.removeChild(tr);//tr的父对象table移除子节点
  }
 </script>
 </head> 

 <body>
 <table id="tabid">
 <tr>
  <td><a href="javascript:void(0)" onclick="creatMail()">添加附件</a></td>
 </tr> 

 </table>
 </body>
</html>

以上就是本文的全部内容，分享了实现原理、核心代码、还有大家应该最喜欢的javascript实现添加附件功能的万丈代码，希望对大家的学习有所帮助。

赞 (0)

相关推荐

  • JavaScript检测上传文件大小的方法

    本文实例讲述了JavaScript检测上传文件大小的方法.分享给大家供大家参考.具体如下: 通过JS客户端代码限制用户上传文件的大小,但是客户端的验证只是辅助的,服务器端一定还要再做验证 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http

  • 利用javascript/jquery对上传文件格式过滤的方法

    复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <style><!-- .errorInfo{ color:red; padding-left:5px; } --></style><s

  • 如何用javascript控制上传文件的大小

    复制代码 代码如下: <form   name=Myform  onsubmit="return   CheckFileSize()">       <input   type=file   name=photo><br/>       <input   type=submit   value=submit></form> <SCRIPT   LANGUAGE="JavaScript"><

  • Javascript & DHTML上传文件控件第1/4页

    上章基本上把要交代的基本知识都说了一些,今天终于开始写代码了:D 首先来做一个实例,批量上传的UI控件.以后一般做的示例也是以UI控件为主的.都是封装成Object或者用Function封装成"Class"类. 也许对于单单看前几章的朋友来说这个例子过于深奥了,但是不用担心,一步步来解释应该很快理解的,关键是理解怎么做,而不是怎么写. 首先看一个成品截图预览: 一.接下来我们先说思路,首先定义一个upload"类", 一).这个类的公共访问信息应该有: 1.构造函数

  • java、javascript实现附件下载示例

    在web开发中,经常需要开发"下载"这一模块,以下给出一个简单的例子. 在服务器端,使用java开发: @RequestMapping(value = "download.html", method = RequestMethod.GET) public void download(String resourceid, HttpServletRequest request, HttpServletResponse response) { response.setCo

  • javascript验证上传文件的类型限制必须为某些格式

    复制代码 代码如下: //验证文件的格式 function validateFile(){ var fileObject=$("#filename"); var errorObject=$("#error"); var filepath=fileObject.val(); var fileArr=filepath.split("//"); var fileTArr=fileArr[fileArr.length-1].toLowerCase().s

  • javascript实现添加附件功能的方法

    javascript实现添加附件功能的方法

    在邮件中我们经常用到添加附件,现在简单的应用下: 效果图: 实现原理: 采用table标签的,主要思想:采用table标签方式 1.点击文字之后,就自动创建(原先是自己/创建,现在拿到table对象之后,可以insertRow() insertCell())创建行和列 2.删除的时候通过父节点来移除 核心代码: function creatMail(){ var tab=document.getElementById("tabid"); var tr=tab.insertRow();/

  • destoon实现公司新闻详细页添加评论功能的方法

    本文讲述了destoon实现公司新闻详细页添加评论功能的方法,具体步骤如下: 首先找到相应的页面: template\default\homepage\new.htm   在对应的地方添加如下代码: {if $could_comment && in_array($moduleid, explode(',', $EXT['comment_module']))} <div id="comment_div" style="display:;">

  • JavaScript简单表格编辑功能实现方法

    本文实例讲述了JavaScript简单表格编辑功能实现方法.分享给大家供大家参考.具体如下: <html> <head> <script type="text/javascript"> function getInnerHTML() { alert(document.getElementById("tr2").innerHTML); } function insCell() { var x=document.getElementB

  • JavaScript动态添加style节点的方法

    本文实例讲述了JavaScript动态添加style节点的方法.分享给大家供大家参考.具体如下: var css = 'h1 { background: red; }', head = document.getElementsByTagName('head')[0], style = document.createElement('style'); style.type = 'text/css'; if(style.styleSheet){ style.styleSheet.cssText =

  • jquery实现动态添加附件功能

    本文实例为大家分享了jquery实现动态添加附件的具体代码,供大家参考,具体内容如下 创建HTML页面 项目中实现的原代码,无删减直接贴上.具体请参考"添加附件"按钮相关操作. 注意引入:cardRansomManage.js,ajaxfileupload.js. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DT

  • 前端JavaScript实现本地模糊搜索功能的方法实例

    目录 一.项目前景 二.涉及知识点 Object.assign()的用法 filter()方法 indexOf()模糊查询 DEMO完整代码如下: 总结 一.项目前景 随着vue.react在实际开发中应运越来越广泛,前端对数据的处理越来越多.这篇文章主要目的就是为了对服务端返回的数据进行处理,按照条件进行模糊查询,从而减少向服务端发送请求的次数,来提高性能和用户体验.下面以一个简单的DEMO,来实现模糊查询的功能: 测试用的数据如下: var data = [{ "title": &

  • javascript打印html内容功能的方法示例

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

  • JavaScript调用浏览器打印功能实例分析

    本文实例讲述了JavaScript调用浏览器打印功能的方法.分享给大家供大家参考.具体如下: 1. 通用型,支持IE,Firefox,Chrome... 复制代码 代码如下: window.print(); 2. 只支持IE打印: <script> var print=function(){ /** * WebBrowser.ExecWB(1,1) 打开 * Web.ExecWB(2,1) 关闭现在所有的IE窗口,并打开一个新窗口 * Web.ExecWB(4,1) 保存网页 * Web.Ex

  • JavaScript实现网页对象拖放功能的方法

    本文实例讲述了JavaScript实现网页对象拖放功能的方法.分享给大家供大家参考.具体如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Drag</title> <meta http-equiv=

  • JavaScript实现添加及删除事件的方法小结

    本文实例总结了JavaScript实现添加及删除事件的方法.分享给大家供大家参考.具体如下: JavaScript添加.删除事件的方法,也就是让某些方法生效指定次数,可以是一次.两次或更多次,但指定次数执行完毕后就删除该方法,使其失效,如果你经常从事JS编程,你就会知道这种功能用得比较多. 先来看看一个比较简单的例子: function $(id) { return document.getElementByIdx_x(id); } var ev = null; var count1 = 0;

随机推荐