0

ドラッグアンドドロップ機能に取り組んでいます。ドロップエリアにファイルをドロップしたときにファイルをキャッチするために必要なコードがありますが、jQueryまたはajaxを介して送信できないため、xmlhttprequestでファイルを送信する際に問題が発生します。

私は今、隠しiFrameについて考えていますが、ユーザードロップのおかげで、既存のフォームにこのファイルを添付する方法がわかりません。

var droparea = $('#dropzone');
    var uploadButon = $('#upload');
    droparea.on('dragover',function(){
        $(this).addClass('dragover');
        return false;
    });
    droparea.on('dragleave',function(){
        $(this).removeClass('dragover');
        return false;
    });
    droparea.on('drop', function(e) {
       e.stopPropagation();
       e.preventDefault();
       $(this).removeClass('dragover');
       var files = e.originalEvent.dataTransfer.files;

       var formData = new FormData($("form")[0]);

            for( var i = 0; i < files.length; ++i ) {
                var file = files[i];
                formData.append("files[]", file);
            }

            return $.ajax({
                url: "upload.php",
                type: "POST",
                data: formData,
                processData: false,
                contentType: false,
                success: function(text) {
                    alert(text);
                }

            });

    });

            //the php

           <?php
             echo count($_FILES["files"]);
                for($i = 0; $i < count($_FILES["files"]["name"]) ; $i++)
                {
              if(move_uploaded_file($_FILES["files"]["tmp_name"][$i],                               "upload/".$_FILES["files"]["name"][$i]))
                echo "ok";
                   else
                echo "no";
                 }
            ?>
4

2 に答える 2

1

私はあなたが要素を意味すると思います

$("#userDroppedFile")

あなたのドロップエリアです。

ただし、これはファイルを取得する方法ではなく、dropイベントで取得します。

$("#userDroppedFile").on("drag dragend dragenter dragleave dragover dragstart drop", function(e){
    var files;
    e.preventDefault();

    if( e.type === "drop" && e.originalEvent.dataTransfer ) {
        files = e.originalEvent.dataTransfer.files;
    }

    if( !files || !files.length ) {
        return;
    }

    doUpload(files);

});

doUploadでは、静的htmlフォームからフォームデータを取得し、それにファイルを追加してアップロードします。

function doUpload(files) {

    var formData = new FormData($("form")[0]);

    for( var i = 0; i < files.length; ++i ) {
        var file = files[i];
        formData.append("file" + (i+1), file);
    }

    return $.ajax({
        url: "xx",
        type: "POST",
        data: formData,
        processData: false,
        contentType: false,
        success: function() {
        }

    });
}
于 2013-03-21T16:00:03.700 に答える
0
var myFile = $('userDropedFile');

有効なjQueryセレクターではありません。あなたはおそらく意味しますか:

var myFile = $('#userDropedFile');
于 2013-03-21T15:53:32.430 に答える