Slepen en neerzetten van meerdere bestanden met afzonderlijke invoertags
Veel code, voor dit voorbeeld, maar het punt is:
Ik wijzig een plugin geschreven in PHP en javascript. Ik'm genereren van een bos van invoervelden en javascript is het creëren van een drag and drop functionaliteit.
Het werkt ok voor enkele bestanden elke keer. (Sleep en laat 1 bestand op de sectie voor het laten vallen van bestanden, en herhaal)
Maar het werkt niet voor meerdere bestanden, omdat ze in 1 invoerveld terechtkomen (bij het toevoegen van "multiple" attribuut aan invoer elementen)
In principe de regel:
document.querySelector('.file-input-element'+j).files = ev.dataTransfer.files;Deze regel stelt de waarde in op een bestand of meerdere bestanden, het is een object van het type: FileList.
Maar ik krijg het niet voor elkaar om de javascript code dit object te laten splitsen, is dat onmogelijk? In ieder geval als iemand me hiermee kan helpen zou dat fijn zijn. Zit een beetje vast op dit punt.
Om samen te vatten: Ik moet meerdere bestanden (afbeeldingen) slepen en in aparte invoer elementen krijgen.
<style>
#drop_zone {
width: 300px;
height: 200px;
border: 2px dotted red;
}
</style>
<script>
function dropHandler(ev) {
console.log('File(s) dropped');
// Prevent default behavior (Prevent file from being opened)
ev.preventDefault();
if (ev.dataTransfer.items) {
// Use DataTransferItemList interface to access the file(s)
for (var j = 0; j < 10; j++) {
console.log(document.querySelector('.file-input-element'+j).files.length == 0);
if (document.querySelector('.file-input-element'+j).files.length == 0) {
// console.log(j+" is leeg dus vullen");
document.querySelector('.file-input-element'+j).files = ev.dataTransfer.files;
break;
}
}
} else {
// Use DataTransfer interface to access the file(s)
for (var i = 0; i < ev.dataTransfer.files.length; i++) {
console.log('... file[' + i + '].name = ' + ev.dataTransfer.files[i].name);
}
}
}
function dragOverHandler(ev) {
console.log('File(s) in drop zone');
// Prevent default behavior (Prevent file from being opened)
ev.preventDefault();
}
</script>
<div class="fieldset marketplace-image">
<h4 class="legend"><?php echo $this->__('Images'); ?></h4>
<div id="drop_zone" ondrop="dropHandler(event);" ondragover="dragOverHandler(event);">
<p>Drag one or more files to this Drop Zone ...</p>
</div>
<div id="marketplace_image_list">
<?php for ($i=0; $i < 10; $i++): ?>
<div class="market_place_add_image<?=$i;?>">
<input class="file-input-element<?=$i;?>" type="file" name="image[<?=$i;?>][]">
</div>
<?php endfor; ?>
</div>
</div>