let form = document.querySelector('.fileupload'); let fileSelect = document.getElementById('photos'); let uploadButton = document.getElementById('upload-btn'); document.getElementById('photos').addEventListener('change', function (event) { let files = event.target.files; // FileList for (let i = 0, f; f = files[i]; i++) { if (!f.type.match('image.*')) { continue; } let reader = new FileReader(); reader.onload = (function(theFile) { return function(e) { let span = document.createElement('span'); span.innerHTML = ['<img class="thumb" src="', e.target.result, '" title="', escape(theFile.name), '"/>'].join(''); document.querySelector ('.filelist').insertBefore(span, null); }; })(f); reader.readAsDataURL(f); } document.querySelector ('.filelist').innerHTML = ''; }); form.addEventListener ("submit", function (event) { event.preventDefault(); document.querySelector("#result").innerHTML = ""; document.querySelector('progress').style = "display: block"; uploadButton.innerHTML = 'werden geladen …'; let files = fileSelect.files; let formData = new FormData(); for (let i = 0; i < files.length; i++) { let file = files[i]; if (!file.type.match('image.*')) { continue; } formData.append('photos[]', file, file.name); } let xhr = new XMLHttpRequest(); xhr.upload.onprogress = function (e) { console.log (e.total); let percentUpload = Math.floor(100*e.loaded / e.total); progress.value = percentUpload; document.querySelector(".msg").innerHTML = percentUpload + '% geladen'; } xhr.open('POST', 'upload.php', true); xhr.onload = function () { if (xhr.status === 200) { document.querySelector("#result").innerHTML = xhr.responseText; uploadButton.innerHTML = 'Upload'; document.querySelector('progress').style = "display: none"; } else { document.querySelector("#result").innerHTML = "Fehler beim Upload " + xhr.responseText; } }; xhr.send(formData); });