1、input標簽沒有設置multiple屬性，文件資源管理器默認一次選取
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Author" content="木人子韋一日塵">
<meta name="Description" content="">
<title>multiple</title>
</head>
<body>
<div>
<!--屬性accept讓文件資源管理器只顯示出符合條件的文件-->
<input id="file" type="file" accept="image/jpeg,image/png">
</div>
<div id="pic_vessel">
</div>
<script>
//如果input的value值發生了改變觸發onchange的事件
file.addEventListener("change",function(){
//獲取files對象
var fObject=this.files;
for(var i=0;i<fObject.length;i++){
var imgI=document.createElement("img");
imgI.style="width:100px;height:100px;margin:10px;";
//將files里的路徑轉化URL
var url=window.URL.createObjectURL(fObject[i]);
//設置屬性src
imgI.setAttribute("src",url);
//添加id為pic_vessel的元素
pic_vessel.appendChild(imgI);
}
});
</script>
</body>
</html>
2、可以設置multiple為空，文件資源管理器就很奇怪的允許了多次選取的行為，而不允許一次選取的行為。值看着像正則表達式，其實就是正則表達式，控制着選取文件格式名的范圍。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Author" content="木人子韋一日塵">
<meta name="Description" content="">
<title>multiple</title>
</head>
<body>
<div>
<!--屬性accept讓文件資源管理器只顯示出符合條件的文件-->
<input id="file" type="file" accept="image/jpeg,image/png" multiple="image/*">
</div>
<div id="pic_vessel">
</div>
<script>
//如果input的value值發生了改變觸發onchange的事件
file.addEventListener("change",function(){
//獲取files對象
var fObject=this.files;
for(var i=0;i<fObject.length;i++){
var imgI=document.createElement("img");
imgI.style="width:100px;height:100px;margin:10px;";
//將files里的路徑轉化URL
var url=window.URL.createObjectURL(fObject[i]);
//設置屬性src
imgI.setAttribute("src",url);
//添加id為pic_vessel的元素
pic_vessel.appendChild(imgI);
}
});
</script>
</body>
</html>
