Select Multiple Files with Input File Type
<html>
<head>
<title>Select Multiple Files with Input File Type</title>
</head>
<body>
<form>
Photos <input type="file" id="photos" multiple="multiple" onchange="selectPhotos()" />
<br>
<div id="result"></div>
<div id="preview"></div>
</form>
<script type="text/javascript">
function selectPhotos(){
var photos = document.getElementById('photos').files;
var s = 'Number of photos: ' + photos.length;
for(var i=0; i<photos.length; i++) {
var photo = photos[i];
s += '<br>Name: ' + photo.name;
s += '<br>Type: ' + photo.type;
s += '<br>Size: ' + photo.size;
s += '<br>=============================';
// Display photos
var img = document.createElement("img");
img.file = photo;
document.getElementById('preview').appendChild(img);
var reader = new FileReader();
reader.onload = (function(aImg) {
return function(e) {
aImg.src = e.target.result;
};
})(img);
reader.readAsDataURL(photo);
}
document.getElementById('result').innerHTML = s;
}
</script>
</body>
</html>
Run Application
Open site in browser and display as below:
