多文件上传操作
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><title>多文件上傳</title><script type="text/javascript">function addFile(){var div=document.getElementById("content");div.innerHTML+="<div><input type='file' name='f'><input type='button' value='remove file' onclick='removeFile(this)'></div>";}function removeFile(btn){document.getElementById("content").removeChild(btn.parentNode);}</script></head><body><input type="button" value="add File" onclick="addFile();"><br><br><form action="${pageContext.request.contextPath}/upload4" method="post" encType="multipart/form-data"><input type="file" name="f"><br><div id="content"></div><input type="submit" value="上傳"></form></body>
</html>
技巧:
JavaScript的多文件上傳表單
- 每次動態增加一個文件上傳輸入框,都把它和刪除按紐放置在一個單獨的div中,并對刪除按紐的onclick事件進行響應,使之刪除刪除按紐所在的div。
- 如:
this.parentNode.parentNode.removeChild(this.parentNode);
?
?
總結
- 上一篇: FileItem API详解及演示
- 下一篇: 上传问题分析1--文件保存位置