13 - 多文件上传

1 多文件上传

后台代码不需要修改

  • upload.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>多文件上传</title>
    <script>
        function addFileUploadDiv() {
            // 1.通过 id 拿到filesDiv
            var div = document.getElementById('filesDiv');
            div.innerHTML += '<div>文件:<input type="file" name="file"><input type="button" value="删除" οnclick="deleteDiv(this)" ></div>'
        }

        function deleteDiv(input) {
            // 通过父标签移除子标签
            var div = document.getElementById('filesDiv');
            div.removeChild(input.parentNode);
        }

    </script>
</head>
<body>
<form action="${pageContext.request.contextPath}/UploadServlet" method="post" enctype="multipart/form-data">
    用户名:<input type="text" name="username"><br>
    密码:<input type="password" name="password"><br>
    <div id="filesDiv">
        <div>文件:<input type="file" name="file"><input type="button" value="删除" onclick="deleteDiv(this)" ></div>
    </div>
    <input type="button" value="添加" onclick="addFileUploadDiv()">
    <input type="submit">
</form>

</body>
</html>

在这里插入图片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章