2012-07-19 28 views
5

私が作っているアップローダーのために、次のコードを実行しています。javascriptのondropイベントからファイルURLを取得する方法

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

私は、ユーザーがWebブラウザ上にデスクトップからファイルをドラッグすることができるようにしたい、と、私は(私はそれを手動でアップロードすることができるように、それは、場所だキャプチャしたいしたくありませんjavascriptを介してアップロード)私の質問は、しかし、私は<input type="file">に入れることができるように、イベントからファイルのクライアントの場所を取得するには?

ありがとうございました。

答えて

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

EXAMPLE

私の例をドラッグしたファイルの一覧を取得するためにイベントの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の例を使用それは私が提供したよりも包括的であるからです。

関連する問題