Question

在此示例中有很多代码，但要点是：

我正在修改用PHP和javascript编写的插件。我正在生成一堆输入字段，而javascript正在创建拖放功能。

每次对单个文件都可以。（将1个文件拖放到用于删除文件的部分，然后重复）

但是它不适用于多个文件，因为它们最终出现在1个输入字段中（在输入元素中添加“多个”属性时）

基本上是一行：

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>

拖放带有单独输入标签的多个文件

0 个答案: