[AngularJS]获取拖放的文件作为输入

发布时间: 2017/4/16 17:15:55
注意事项: 本文中文内容可能为机器翻译,如要查看英文原文请点击上面连接.

我处理所以输入输入的类型"file"中的文件︰

<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 中删除的文件作为输入。

解决方法 1:

在结束了我发现最好的方式去做。

同时下降,我改用了︰

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>

所以它工作时掉了东西。

赞助商