Hallo zusammen,
ich sitze hier gerade an einem kleinen Problem. Vielleicht kann mir ja auf die schnelle wer helfen.
Ich möchte ein Multiple Fileupload benutzen. Der Upload funktioniert soweit schon ganz gut. Ich möchte den maxUpload allerdings auf 4 Dateien begrenzen mit einem dementsprechenden Hinweis falls mehr ausgewählt wurden.
Und ich möchte den Upload erst bei Klick auf absenden ausführen. Aktuell ist es so, dass wenn ich die Bilder auswähle er direkt in das Verzeichnis vom WebServer schreibt.
Ich hab es leider nicht so drauf mit JavaScript und wäre Euch sehr dankbar für Lösungen oder Lösungsansätze.
Gruß Daniel
ich sitze hier gerade an einem kleinen Problem. Vielleicht kann mir ja auf die schnelle wer helfen.
Ich möchte ein Multiple Fileupload benutzen. Der Upload funktioniert soweit schon ganz gut. Ich möchte den maxUpload allerdings auf 4 Dateien begrenzen mit einem dementsprechenden Hinweis falls mehr ausgewählt wurden.
Und ich möchte den Upload erst bei Klick auf absenden ausführen. Aktuell ist es so, dass wenn ich die Bilder auswähle er direkt in das Verzeichnis vom WebServer schreibt.
Ich hab es leider nicht so drauf mit JavaScript und wäre Euch sehr dankbar für Lösungen oder Lösungsansätze.
Gruß Daniel
Code:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Formular Bilder hochladen</title> <link rel="stylesheet" href="./style.css" /> <link href='http://fonts.googleapis.com/css?family=Oswald:400,300' rel='stylesheet' type='text/css'> <head> <body> <h1><p>Fotos hochladen</p></h1> <form> <p>Bitte wählen Sie hier Ihre Bilder aus. Sie können auch mehrere Bilder auswählen. <br/><br/></p> <input type="file" multiple /> <div class="photos"> </div> <br/> <br/> <button type="submit" class="" id="absenden" name="absenden" >Absenden</button> </form> <script type="text/javascript"> // Once files have been selected document.querySelector('form input[type=file]').addEventListener('change', function(event){ // Read files var files = event.target.files; // Iterate through files //files.length -> 4 for (var i = 0; i < 4; i++) { alert(i); // Ensure it's an image if (files[i].type.match(/image.*/)) { // Load image var reader = new FileReader(); reader.onload = function (readerEvent) { var image = new Image(); image.onload = function (imageEvent) { // Add elemnt to page var imageElement = document.createElement('div'); imageElement.classList.add('uploading'); imageElement.innerHTML = '<span class="progress"><span></span></span>'; var progressElement = imageElement.querySelector('span.progress span'); progressElement.style.width = 0; document.querySelector('form div.photos').appendChild(imageElement); // Test ALERT //alert("Bild ausgwählt und hochgeladen"); // Resize image var canvas = document.createElement('canvas'), max_size = 1200, width = image.width, height = image.height; if (width > height) { if (width > max_size) { height *= max_size / width; width = max_size; } } else { if (height > max_size) { width *= max_size / height; height = max_size; } } canvas.width = width; canvas.height = height; canvas.getContext('2d').drawImage(image, 0, 0, width, height); // Upload image var xhr = new XMLHttpRequest(); if (xhr.upload) { // Update progress xhr.upload.addEventListener('progress', function(event) { var percent = parseInt(event.loaded / event.total * 100); progressElement.style.width = percent+'%'; }, false); // File uploaded / failed xhr.onreadystatechange = function(event) { if (xhr.readyState == 4) { if (xhr.status == 200) { imageElement.classList.remove('uploading'); imageElement.classList.add('uploaded'); imageElement.style.backgroundImage = 'url('+xhr.responseText+')'; console.log('Image uploaded: '+xhr.responseText); } else { imageElement.parentNode.removeChild(imageElement); } } } // Start upload xhr.open('post', 'process.php', true); xhr.send(canvas.toDataURL('image/jpeg')); } } image.src = readerEvent.target.result; } reader.readAsDataURL(files[i]); } } // Clear files event.target.value = ''; }); </script> </body> </html>
Kommentar