php - div コンテナでのドラッグ アンド ドロップ アップロードを有効にする

Question

これに似た質問がいくつかあると思いますが、何を検索すればよいかわかりませんでした。

私が探しているのは、自分の Web サイトの div にドラッグ アンド ドロップできるようにする方法です。現在、ページにファイルをドロップすると (Chrome を使用しています)、ファイル (file:// url) が表示されますが、これは必要なものではありません。プラグインを使わずにこれを行う方法があれば、もっとうれしいです。複数のファイルをサポートする必要があります。

これは私のdiv-cssがどのように見えるかです:

#dnd {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;  
}

そして、ドラッグ用のjQueryバインドは次のとおりです。

function processFileUpload(droppedFiles)
{
    var uploadFormData = new FormData($("#dnd")[0]); 
    if(droppedFiles.length > 0)
    {
        for(f = 0; f < droppedFiles.length; f++)
        {
            uploadFormData.append("upload[]",droppedFiles[f]);
        }
    }

    $.ajax({
        url : "index.php",
        type : "POST",
        data : uploadFormData,
        cache : false,
        contentType : false,
        processData : false
    });
}

$("#dnd").bind("dragenter", function() {
    $(this).css("background", "#8c8c8c");
    return false;
});

$("#dnd").bind("dragleave", function() {
    $(this).css("background", "#c9c9c9");
    return false;
});

$("#dnd").bind("drop", function(e) {
    files = e.dataTransfer.files;
    processFileUpload(files);
    return false;
});

すべてのコメントと回答に感謝します。ありがとうございました！