获取删除的文件作为输入

debugcn 发表于 Dev

查克·阿吉拉尔（Chuck Aguilar）

我处理输入类型为“文件”的输入文件，因此：

<input id="upload_button" type="file"/>

然后：

var handleFileSelect = function(evt) {                                  

        var target = evt.dataTransfer || evt.target;
        var file = target && target.files && target.files[0];
        (...)
    };
    angular.element(document.querySelector('#upload_button')).on('change', handleFileSelect);`

如您所见document.querySelector('#upload_button').on('change', handleFileSelect);。

但是我想对div拖放做同样的事情：

<div class="drop-zone" id="upload_drop" >
        <img src="../images/icon_cloud.png"/>
        <font class="receipt_upload_font"> Beleg per Drag & Drop hinzufügen</font>
        <font class="receipt_upload_oder_font"> oder unten "Beleg hinzufügen" klicken und Datei auswählen</font>
    </div>`

但是我不知道该怎么做。:(我无法将div中已删除的文件作为输入。

查克·阿吉拉尔（Chuck Aguilar）

最后，我找到了一种最佳方法。

当掉落时，我改为使用：

angular.element(document.querySelector('#upload_button')).on('change', handleFileSelect);

这个：

<div class="drop-zone" id="upload_drop" >
    <img src="../images/icon_cloud.png"/>
    <font class="receipt_upload_font"> Beleg per Drag & Drop hinzufügen</font>
    <font class="receipt_upload_oder_font"> oder unten "Beleg hinzufügen" klicken und Datei auswählen</font>
</div>
<script>
 var dropZone = document.getElementById('upload_drop');

    // Get file data on drop
    dropZone.addEventListener('drop', function(e) {
        handleFileSelect(e);
    });
<script>

因此，当我放下东西时，它会起作用。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。