- 在input標籤中加入 multiple 屬性,可以在一個輸入框中選擇多個文件進行上傳
<input type="file" name="img" multiple="multiple"
/>
當然,這樣也是一樣的:
<input type="file" name="img" multiple
/>
2.很多時候上傳的時候,我們要限制一下上傳文件類型(
在windows中主要是限制後綴名
),或者是把選擇的文件名(路徑)輸出到當前頁面,, 這需要用js取得選擇文件的名字: document.getElementById("input").files[i].name 3.後臺接收,java就要看使用的框架了,struts應該只需要把對應的成員變量改成數組就OK吧(推測), 比較老的項目,可能沒有引用框架,或者說框架沒有考慮到這部分,就需要修改文件上傳的代碼了,這裏 只說其中一種情況(我遇到的)。 後臺接收到的流是放到一個Map中的,但是在put的時候,Map的key使用的是標籤的name屬性,這樣會導致 選擇的多個文件只能接到一個文件(Map中的Key值不能重複,前面put的就被後面的覆蓋了)。 這種情況可以使用上傳文件的名作爲Map的key值,這樣會影響到其他的模塊,主要是map中的key變化後,其他模塊 在取得流的時候,可能會接不到(標籤名和文件名是會有很大的不同的)。 我的做法是,在頁面埋一個hidden,用js填充上上傳文件的名(注意是多個),這樣後臺就可以得到上傳文件的名, 然後就沒有我的事了 附一段Demo:
<body topmargin="0" leftmargin="0" rightmargin="0" marginheight="0" marginwidth="0">
<h1>-------------多選擇批量上傳文件-------------</h1>
<form enctype="multipart/form-data" action="http://10.1.3.191:32170/rootCerts/files" method="post">
選擇圖片:<input type="file" id="files" name="files" onchange="onc()" multiple="multiple" />
<input type="submit" />
</form>
<p>請嘗試在瀏覽文件時選取一個以上的文件。</p>
</body>
<script type="text/javascript">
function addRow() {
var tr = document.getElementById("myTr");
var con = tr.cloneNode(true);
con.removeAttribute("style");
tr.parentNode.insertAdjacentElement("beforeEnd", con);
}
function delRow(obj) {
var tr = obj.parentNode.parentNode;
tr.parentNode.removeChild(tr);
}
function onc() {
var files = document.getElementById("files").files;
let str ="文件爲:";
for (var i = 0; i < files.length; i++) {
str = str + files[i].name;
}
console.log(str);
}
</script>
接下來就是後臺的java代碼, 這裏用的是springMvc來接收,:
@RequestMapping(value = "/files", method = RequestMethod.POST, consumes = "multipart/form-data")
public Response<String> batchCreateFileByWeb( @RequestBody MultipartFile[] files) {
Assert.notNull(files, "files must not be null");
if (!(files.length == 0)) {
// 解析單個文件操作
for (MultipartFile file : files) {
.....
}
}
}