Question

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

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

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

感谢。

Answer 1

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

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

Answer 2

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

EXAMPLE

我的例子：

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

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

2 个答案: