複数のファイルを別々の入力タグでドラッグ＆ドロップ
この例では多くのコードが必要ですが、要は
私はPHPとjavascriptで書かれたプラグインを修正しています。私はたくさんの入力フィールドを作成し、javascriptはドラッグ＆ドロップ機能を作成しています。
1つのファイルに対しては問題なく動作します。(ファイルをドロップするセクションに1つのファイルをドラッグ＆ドロップし、それを繰り返す)
しかし、複数のファイルが1つの入力フィールドに入ってしまうため、うまくいきません（input要素に"multiple"属性を追加する場合）。
基本的には、この行を
document.querySelector('.file-input-element'+j).files = ev.dataTransfer.files;この行では、ファイルまたは複数のファイルに値を設定し、それはタイプのオブジェクトです。FileListです。
しかし、javascriptのコードでこのオブジェクトを分割することができないのですが、不可能なのでしょうか？とにかく誰か手伝ってくれると助かります。ちょっと困っています。
要約すると複数のファイル（画像）をドラッグ＆ドロップして、別々の入力要素に入れる必要があります。
<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>
1
0