js jquery分别实现动态的文件上传操作按钮的添加和删除


Posted in Javascript onJanuary 13, 2014

javascript实现

<!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="Content-Type" content="text/html; charset=utf-8" /> 
<title>jquery文件上传</title> 
<script type="text/javascript" src="jquery-1.7.2.js"></script> 
<script type="text/javascript"> 
var addMore = function() { 
var div = document.getElementById("div2"); 
var br = document.createElement("br"); 
var input = document.createElement("input"); 
var button = document.createElement("input"); input.setAttribute("type", "file"); 
button.setAttribute("type", "button"); 
button.setAttribute("value", "Remove"); 
button.onclick = function() { 
div.removeChild(br); 
div.removeChild(input); 
div.removeChild(button); 
} 
div.appendChild(br); 
div.appendChild(input); 
div.appendChild(button); 
} 
//节点的移动 
//$(function(){ 
//}); 
</script> 
</head> 
<body> 
<div id="div1"> 
<input type="file" id="upload"/> 
<input type="button" id="btn" value="more" onclick="addMore();"/> 
</div> 
<div id="div2"></div> 
</body> 
</html>

jquery实现
<!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="Content-Type" content="text/html; charset=utf-8" /> 
<title>jquery文件上传</title> 
<title>jquery1</title> 
<script type="text/javascript" src="jquery-1.7.2.js"></script> 
<script type="text/javascript"> 
/** var addMore = function() { 
var div = document.getElementById("div2"); 
var br = document.createElement("br"); 
var input = document.createElement("input"); 
var button = document.createElement("input"); input.setAttribute("type", "file"); 
button.setAttribute("type", "button"); 
button.setAttribute("value", "Remove"); 
button.onclick = function() { 
div.removeChild(br); 
div.removeChild(input); 
div.removeChild(button); 
} 
div.appendChild(br); 
div.appendChild(input); 
div.appendChild(button); 
}**/ 
//jquery实现文件上传的按钮添加和删除 
$(function(){ 
$("input[type=button]").click(function(){ 
var br = $("<br>"); 
var input = $("<input type='file'/>"); 
var button = $("<input type='button' value='Remove'/>"); 
$("#div1").append(br).append(input).append(button); 
button.click(function() { 
br.remove(); 
input.remove(); 
button.remove(); 
}); 
}); 
}); 
</script> 
</head> 
<body> 
<div id="div1"> 
<input type="file" id="upload"/> 
<input type="button" id="btn" value="more" onclick="addMore();"/> 
</div> 
<div id="div2"></div> 
</body> 
</html>
Javascript 相关文章推荐
一个不错的用JavaScript实现的UBB编码函数
Mar 09 Javascript
很全的显示阴历(农历)日期的js代码
Jan 01 Javascript
js校验表单后提交表单的三种方法总结
Feb 28 Javascript
使用jQuery动态加载js脚本文件的方法
Apr 03 Javascript
淘宝网提供的国内NPM镜像简介和使用方法
Apr 17 Javascript
jQuery内容折叠效果插件用法实例分析(附demo源码)
Apr 28 Javascript
JavaScript原生编写《飞机大战坦克》游戏完整实例
Jan 04 Javascript
Bootstrap fileinput文件上传组件使用详解
Jun 06 Javascript
AngularJS 购物车全选/取消全选功能的实现方法
Aug 14 Javascript
微信小程序开发(二):页面跳转并传参操作示例
Jun 01 Javascript
Vant Weapp组件踩坑:picker的初始赋值解决
Nov 12 Javascript
JS 4个超级实用的小技巧 提升开发效率
Oct 05 Javascript
js实现的map方法示例代码
Jan 13 #Javascript
jquery教程ajax请求json数据示例
Jan 13 #Javascript
JavaScript输入邮箱自动提示实例代码
Jan 13 #Javascript
js判断是否为ie的方法小结
Jan 13 #Javascript
jquery教程限制文本框只能输入数字和小数点示例分享
Jan 13 #Javascript
javascript教程之不完整的继承(js原型链)
Jan 13 #Javascript
javascript函数作用域学习示例(js作用域)
Jan 13 #Javascript
You might like
ThinkPHP自动验证失败的解决方法
2011/06/09 PHP
使用PHP生成PDF方法详解
2015/01/23 PHP
非常有用的9个PHP代码片段
2016/04/06 PHP
php设计模式之组合模式实例详解【星际争霸游戏案例】
2020/03/27 PHP
取得父标签
2006/11/14 Javascript
jQuery maxlength文本字数限制插件
2010/04/16 Javascript
网页右键ie不支持event.preventDefault和event.returnValue (需要加window)
2013/02/22 Javascript
详解JavaScript中的blink()方法的使用
2015/06/08 Javascript
如何用JavaScript实现动态修改CSS样式表
2016/05/20 Javascript
浅谈jquery的map()和each()方法
2016/06/12 Javascript
微信开发 消息推送实现代码
2016/10/21 Javascript
用Nodejs搭建服务器访问html、css、JS等静态资源文件
2017/04/28 NodeJs
基于jQuery Easyui实现登陆框界面
2017/07/10 jQuery
基于jQuery实现Ajax验证用户名是否可用实例
2018/03/25 jQuery
Vue2.0 实现单选互斥的方法
2018/04/13 Javascript
用npm安装vue和vue-cli,并使用webpack创建项目的方法
2018/09/28 Javascript
Vue加载json文件的方法简单示例
2019/01/28 Javascript
基于layui实现高级搜索(筛选)功能
2019/07/26 Javascript
浅谈vue获得后台数据无法显示到table上面的坑
2020/08/13 Javascript
[11:44]Ti9 OG夺冠时刻
2019/08/25 DOTA
对numpy和pandas中数组的合并和拆分详解
2018/04/11 Python
python+pyqt5实现KFC点餐收银系统
2019/01/24 Python
python assert的用处示例详解
2019/04/01 Python
pyqt5 键盘监听按下enter 就登陆的实例
2019/06/25 Python
python如何爬取网站数据并进行数据可视化
2019/07/08 Python
TensorFlow基本的常量、变量和运算操作详解
2020/02/03 Python
Python实现发票自动校核微信机器人的方法
2020/05/22 Python
如何理解python对象
2020/06/21 Python
基于python requests selenium爬取excel vba过程解析
2020/08/12 Python
用Python制作mini翻译器的实现示例
2020/08/17 Python
优秀团员个人的自我评价
2013/10/02 职场文书
学习经验演讲稿
2014/05/10 职场文书
农村门前三包责任书
2014/07/25 职场文书
法英专业大学生职业生涯规划书范文
2014/09/22 职场文书
Golang 编译成DLL文件的操作
2021/05/06 Golang
DSP接收机前端设想
2022/04/05 无线电