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

Question

我正在为我正在创建的上传者运行以下代码。

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

我希望用户能够从桌面文件拖动到网页浏览器，然后我想捕捉它的位置，这样我就可以手动上传它（不想做通过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例子因为它比我提供的更全面。