如何從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例子因爲它比我提供的更全面。