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