web-dev-qa-db-ja.com

ドラッグアンドドロップファイルのアップロード

だから私は私が探しているものとそれを実装する方法を見つけるのに少し苦労しています。

基本的なPHPファイルアップローダーが機能しています。ユーザーがカスタムアップロードボタンを押し、ファイルを選択し、JSを使用して、変更をチェックします（つまり、ユーザーがファイルを選択します）。画像をアップロードするフォームを送信します。

また、アップロードエリアへのドラッグアンドドロップも必要です。そのため、ユーザーはファイルエクスプローラーから画像をドラッグして、指定された場所（ページ全体ではなく）にドロップし、その画像がドロップされると、フォームで自動的に送信され、同じPHP処理。

これは可能で現実的ですか？

phpjqueryhtmluploaddrag-and-drop
15
Tenatious

これは完全に現実的であり、サードパーティのプラグインを使用しなくても可能です。

次のスニペットは、それがどのように機能するかについてのアイデアを与えるでしょう：

ドロップエリア

$(".drop-files-container").bind("drop", function(e) {
    var files = e.originalEvent.dataTransfer.files;
    processFileUpload(files); 
    // forward the file object to your ajax upload method
    return false;
});

processFileUpload（）-Method：

function processFileUpload(droppedFiles) {
         // add your files to the regular upload form
    var uploadFormData = new FormData($("#yourregularuploadformId")[0]); 
    if(droppedFiles.length > 0) { // checks if any files were dropped
        for(var f = 0; f < droppedFiles.length; f++) { // for-loop for each file dropped
            uploadFormData.append("files[]",droppedFiles[f]);  // adding every file to the form so you could upload multiple files
        }
    }

 // the final ajax call

       $.ajax({
        url : "upload.php", // use your target
        type : "POST",
        data : uploadFormData,
        cache : false,
        contentType : false,
        processData : false,
        success : function(ret) {
                 // callback function
        }
       });

 }

フォームの例

<form enctype="multipart/form-data" id="yourregularuploadformId">
     <input type="file" name="files[]" multiple="multiple">
</form>

このようなものを出発点として自由に使用してください。このブラウザのサポートについては、こちらをご覧ください http://caniuse.com/#feat=xhr2

もちろん、プログレスバー、プレビュー、アニメーションなどの追加機能を追加できます...

33
wildhaber