如何在javascript中从ondrop事件中获取文件URL

How to get the file URL from ondrop event in javascript

本文关键字：获取 文件 URL 事件 ondrop javascript 中从      更新时间：2023-12-17

我正在为我正在制作的上传程序运行以下代码。

holder.ondrop = function (e) {
    e.preventDefault();
    console.log(e);
}

我希望用户能够将文件从桌面拖到web浏览器上，然后我想捕捉它的位置，这样我就可以手动上传它（不想通过javascript进行上传）。不过，我的问题是，如何从事件中获取文件的客户端位置，以便将其放在<input type="file">中？

谢谢。

下面是mozilla使用事件的dataTransfer对象来获取拖动的文件列表的示例

示例

我的例子：

holder.ondrop = function (e) {
    e.preventDefault();
    if(e.dataTransfer && e.dataTransfer.files.length != 0){
        var files = e.dataTransfer.files //Array of filenames
        files[0]; //the first file in the list
        // code to place file name in field goes here...
    }else{
        // browser doesn't support drag and drop.
    }
    console.log(e);
}

使用mozilla示例，因为它比我提供的更全面。

输入文件字段可以被视为普通输入字段，其值可以如下获取。

<input id="inputid" type="file" dropzone="..."> 
holder.ondrop = function (e) {
    e.preventDefault();
    var path = $('#inputid').val();
    //split the string at the lastIndexOf '/' to get filename 
    console.log(e);
}
相关文章：