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

Question

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

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

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

谢谢。

Answer 1

下面是一个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 示例，因为它比我提供的更全面。

Answer 2

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

<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);
}