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>

在這裏插入圖片描述

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