模拟JQUERY多文件上传效果
下面的代码，点击按钮后，插入的元素成几何倍数增加是怎么回事，我想实现的效果的，点击按钮，增加一个文件上传文本，×和√不显示，点击按钮的同时显示×和√然后再增加下一个上传的...
下面的代码，点击按钮后，插入的元素成几何倍数增加是怎么回事，我想实现的效果的，点击按钮，增加一个文件上传文本，×和√不显示，点击按钮的同时显示×和√然后再增加下一个上传的INPUT和BUTTON。
<style>
.box { position: relative;}
.cha {position: absolute;left: 155px; top: 2px; color: red;}
.gou {color: green;}
</style>
<body>
<div class="warp" id="warp">
<div class="box">
<input type="text" class="text">
<button type="button">上传</button>
<span class="cha">×</span>
<span class="gou">√</span>
</div>
</div>
</body>
<script>
var inputext ="上传文件完毕";
$(".warp").on("click","button",function(){
$(".box").after("<div class='box'><input type='text'><button type='button'>上传</button><span class='cha'>×</span><span class='gou'>√</span></div>");
$("input").val(inputext);
$(this).remove();
});
</script> 展开
<style>
.box { position: relative;}
.cha {position: absolute;left: 155px; top: 2px; color: red;}
.gou {color: green;}
</style>
<body>
<div class="warp" id="warp">
<div class="box">
<input type="text" class="text">
<button type="button">上传</button>
<span class="cha">×</span>
<span class="gou">√</span>
</div>
</div>
</body>
<script>
var inputext ="上传文件完毕";
$(".warp").on("click","button",function(){
$(".box").after("<div class='box'><input type='text'><button type='button'>上传</button><span class='cha'>×</span><span class='gou'>√</span></div>");
$("input").val(inputext);
$(this).remove();
});
</script> 展开
1个回答
2017-12-12 · 百度知道合伙人官方认证企业
育知同创教育
1【专注：Python+人工智能|Java大数据|HTML5培训】 2【免费提供名师直播课堂、公开课及视频教程】 3【地址：北京市昌平区三旗百汇物美大卖场2层，微信公众号：yuzhitc】
向TA提问
关注
![]()
展开全部
<!doctype html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>HTML5 Ajax Uploader</title>
<script src="jquery-2.1.1.min.js"></script>
</head>
<body>
<p><input type="file" id="upfile"></p>
<p><input type="button" id="upJS" value="用原生JS上传"></p>
<p><input type="button" id="upJQuery" value="用jQuery上传"></p>
<script>
/*原生JS版*/
document.getElementById("upJS").onclick = function() {
/* FormData 是表单数据类 */
var fd = new FormData();
var ajax = new XMLHttpRequest();
fd.append("upload", 1);
/* 把文件添加到表单里 */
fd.append("upfile", document.getElementById("upfile").files[0]);
ajax.open("post", "test.php", true);
ajax.onload = function () {
console.log(ajax.responseText);
};
ajax.send(fd);
}
/* jQuery 版 */
$('#upJQuery').on('click', function() {
var fd = new FormData();
fd.append("upload", 1);
fd.append("upfile", $("#upfile").get(0).files[0]);
$.ajax({
url: "test.php",
type: "POST",
processData: false,
contentType: false,
data: fd,
success: function(d) {
console.log(d);
}
});
});
</script>
</body>
</html>
<?php
if (isset($_POST['upload'])) {
var_dump($_FILES);
move_uploaded_file($_FILES['upfile']['tmp_name'], 'up_tmp/'.time().'.dat');
//header('location: test.php');
exit;
}
?>
本回答由网友推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
