Home > Developer > Web Develop
Uploading multiple Files
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title> Bulk Upload Files </title>
<body>
<input type= "file" multiple value= "upload files" id= "filename" >
<div class= "box" >
</div>
</body>
<script>
Let Selectfile = document.getElementById (' file ');
Let preview = document.getelementsbyclassname (' box ') [0];
function Setselectfilebehavior (subjects) {
if (! Array.isarray (subjects)) {
if (subjects.length) subjects = Array.from (subjects);
else subjects = [subjects]
}
Subjects.foreach (subject = {
Subject.addeventlistener (' Change ', evt =>{
Let fileInput = Evt.target;
Let files = Array.from (fileinput.files);
Let URL = window. URL | | Window.webkiturl;
if (typeof FileReader = = = ' function ') {
Files.foreach (file = {
Let reader = new FileReader ();
Reader.readasdataurl (file);
Reader.onload = function (evt) {
Let event = new Customevent (' Fileselect ', {
detail:{
DataURL:evt.target.result
}
});
Subject.dispatchevent (event);
}
})
} else if (URL) {
Files.foreach (file = {
Let blob = Url.createobjecturl (file);
Let event = new Customevent (' Fileselect ', {
detail:{
Blob:blob
}
});
Subject.dispatchevent (event);
});
}
})
})
}
Setselectfilebehavior (Selectfile);
Selectfile.addeventlistener (' change ', evt = {
preview.innerhtml = ";
});
Selectfile.addeventlistener (' fileselect ', evt = {
Let img = new Image ();
IMG.SRC = Evt.detail.dataURL | | Evt.detail.blob;
img.style.padding = ' 5px ';
Img.style.height = ' 150px ';
Preview.appendchild (IMG);
})
</script>Uploading Multiple files
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
