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 写的一个简单的timer
Jul 30 Javascript
jQuery Flash/MP3/Video多媒体插件
Jan 18 Javascript
jquery向.ashx文件post中文乱码问题的解决方法
Mar 28 Javascript
js中设置元素class的三种方法小结
Aug 28 Javascript
JavaScript禁止页面操作的示例代码
Dec 17 Javascript
JS正则RegExp.test()使用注意事项(不具有重复性)
Dec 28 Javascript
Vue2 SSR渲染根据不同页面修改 meta
Nov 20 Javascript
vue 国际化 vue-i18n 双语言 语言包
Jun 07 Javascript
vue车牌号校验和银行校验实战
Jan 23 Javascript
在Node.js下运用MQTT协议实现即时通讯及离线推送的方法
Jan 24 Javascript
jQuery插件simplePagination的使用方法示例
Apr 28 jQuery
一分钟学会JavaScript中的try-catch
Dec 14 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
可快速识别放射性物质-国外大神教你diy一个开放式辐射探测器
2020/03/12 无线电
PHP Mysql编程之高级技巧
2008/08/27 PHP
MYSQL 小技巧 -- LAST_INSERT_ID
2009/11/24 PHP
php 获取页面中指定内容的实现类
2014/01/23 PHP
php创建和删除目录函数介绍和递归删除目录函数分享
2014/11/18 PHP
PHP处理Ajax请求与Ajax跨域问题
2017/02/13 PHP
Jquery validation remote 验证的缓存问题解决方法
2014/03/25 Javascript
jquery序列化表单去除指定元素示例代码
2014/04/10 Javascript
javascript去除空格方法小结
2015/05/21 Javascript
javascript实现行拖动的方法
2015/05/27 Javascript
jquery获取复选框checkbox的值实现方法
2016/05/30 Javascript
纯JavaScript 实现flappy bird小游戏实例代码
2016/09/27 Javascript
js document.getElementsByClassName的使用介绍与自定义函数
2016/11/25 Javascript
Angular实现一个简单的多选复选框的弹出框指令实例
2017/04/25 Javascript
Three.js实现浏览器变动时进行自适应的方法
2017/09/26 Javascript
基于vue.js中事件修饰符.self的用法(详解)
2018/02/23 Javascript
vue input实现点击按钮文字增删功能示例
2019/01/29 Javascript
Vue el-autocomplete远程搜索下拉框并实现自动填充功能(推荐)
2019/10/25 Javascript
线程和进程的区别及Python代码实例
2015/02/04 Python
python杀死一个线程的方法
2015/09/06 Python
python 3.5下xadmin的使用及修复源码bug
2017/05/10 Python
Python通过matplotlib画双层饼图及环形图简单示例
2017/12/15 Python
python3.5+tesseract+adb实现西瓜视频或头脑王者辅助答题
2018/01/17 Python
pytorch中tensor的合并与截取方法
2018/07/26 Python
python绘制双Y轴折线图以及单Y轴双变量柱状图的实例
2019/07/08 Python
Python利用FFT进行简单滤波的实现
2020/02/26 Python
解决pycharm不能自动保存在远程linux中的问题
2021/02/06 Python
法国时尚童装网站:Melijoe
2016/08/10 全球购物
精神文明建设汇报材料
2014/12/24 职场文书
教学督导岗位职责
2015/04/10 职场文书
离婚起诉状范本
2015/05/19 职场文书
毕业论文答辩开场白和结束语
2015/05/27 职场文书
学校运动会加油词
2015/07/18 职场文书
python实现批量移动文件
2021/04/05 Python
django学习之ajax post传参的2种格式实例
2021/05/14 Python
Golang 字符串的常见操作
2022/04/19 Golang