Ankündigung

Einklappen
Keine Ankündigung bisher.

HILFE -> JavaScript Uploadbegrenzung

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • HILFE -> JavaScript Uploadbegrenzung

    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

    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>

  • #2
    Wo hast du denn das Script geklaut?

    Max 4 Dateien: if
    Erst bei klick: onClick
    [QUOTE=nikosch]Macht doch alle was Ihr wollt mit Eurem Billigscheiß. Von mir aus sollen alle Eure Server abrauchen.[/QUOTE]

    Kommentar


    • #3
      Das Script kommt hier her.

      https://joelvardy.com/writing/javascript-image-upload

      Wenn ich die Dateien ausgewählt habe werden Sie allerdings immer noch direkt hochgeladen.

      Kommentar


      • #4
        Ja, weil der Upload auch in der onChange-Funktion steht.
        [QUOTE=nikosch]Macht doch alle was Ihr wollt mit Eurem Billigscheiß. Von mir aus sollen alle Eure Server abrauchen.[/QUOTE]

        Kommentar

        Lädt...
        X