您的位置：首页 > Web前端 > JavaScript

JavaWeb同步学习笔记之九十、JavaWeb_文件上传案例_JS代码

2019-03-21 15:53 232 查看

JavaWeb_文件上传案例_JS代码

文件上传案例_JS代码

文件上传案例_JS代码

1.在 upload.jsp 页面上使用 jQuery 实现 “新增一个附件”，“删除附件”。但至少需要保留一个，代码实现：
upload.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript"
src="${pageContext.request.contextPath }/scripts/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function() {

var i = 2;

$("#addFile").click(function() {
$(this).parent().parent().before("<tr class='file'><td>File"
+ i + ":</td><td><input type='file' name='file"
+ i + "' /></td></tr><tr class='desc'><td>Desc"
+ i + ":</td><td><input type='text' name='desc"
+ i + "' /><button id='delete"
+ i + "'>删除</button></td></tr>");
i++;
$("#delete" + (i - 1)).click(function() {
var $tr = $(this).parent().parent();
$tr.prev("tr").remove();
$tr.remove();

$(".file").each(function(index) {
var n = index + 1;
$(this).find("td:first").text("File" + n);
$(this).find("td:last input").attr("name", "file" + n);
});

$(".desc").each(function(index) {
var n = index + 1;
$(this).find("td:first").text("Desc" + n);
$(this).find("td:last input").attr("name", "desc" + n);
i = ++n;
});

});
return false;
});

});
</script>
</head>
<body>

<font color="red">${message }</font>

<form action="uploadServlet" method="post"
enctype="multipart/form-data">
<table>
<tr class="file">
<td>File1:</td>
<td><input type="file" name="file1" /></td>
</tr>
<tr class="desc">
<td>Desc1:</td>
<td><input type="text" name="desc1" /></td>
</tr>
<tr>
<td><input type="submit" id="submit" value="提交" /></td>
<td><button id="addFile">新增一个附件</button></td>
</tr>
</table>
</form>

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航