- 在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:
<!DOCTYPE HTML>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<body>
<script type="text/javascript">
function onc(){
var files = document.getElementById("input").files;
for(var i=0; i< files.length; i++){
alert(input.files[i].name);
}
}
</script>
<form action="/example/html5/demo_form.asp" method="get">
選擇圖片:<input type="file" id="input" name="input" onchange="onc()" multiple="multiple" />
<input type="submit" />
</form>
<p>請嘗試在瀏覽文件時選取一個以上的文件。</p>
</body>
</html>