fileEle
element to a back-end:const upload = function (fileEle, backendUrl) {return new Promise(function (resolve, reject) {// Get the list of selected filesconst files = fileEle.files;// Create a new FormDataconst formData = new FormData();// Loop over the files[].forEach.call(files, function (file) {formData.append(fileEle.name, file, file.name);});// Create new Ajax requestconst req = new XMLHttpRequest();req.open('POST', backendUrl, true);// Handle the eventsreq.onload = function () {if (req.status >= 200 && req.status < 400) {resolve(req.responseText);}};req.onerror = function () {reject();};// Send itreq.send(formData);});};
file
input that allows user to choose multiple files:<input type="file" id="upload" multiple />
click
event handler of a button which performs the uploading:const fileEle = document.getElementById('upload');upload(fileEle, '/path/to/back-end').then(function(response) {// `response` is what we got from the back-end// We can parse it if the server returns a JSONconst data = JSON.parse(response);...});