11

jQuery を使用して、独自の単純な AJAX 画像アップロード スクリプトをコーディングしようとしています。いくつかのプラグインを見つけましたが、それらは必要なものに対してカスタマイズされすぎており、適切に動作させることができません。

ユーザーが画像をページにドラッグアンドドロップしたことを何とか検出したいだけです。そこから、そのデータをアップロードして /cache/ ディレクトリに移動し、さらにオプションを許可するのは難しくないと確信しています..

しかし、今はドラッグ/ドロップ機能に完全に行き詰まっています。文字通り、私がこれにどのようにアプローチすべきかわかりません。どのようなイベント ハンドラーが必要ですか? 独自のイベント ハンドラーをカスタム コードする必要がありますか? どんなアドバイスでも大歓迎です

4

2 に答える 2

10

どのようなイベントハンドラーが必要ですか？

ドラッグアンドドロップにはHTML5ブラウザが必要ですが、今ではほとんどすべてです。

かなりのコードが必要なので、最初から始めないことをお勧めします-jQueryプラグインとして実装するこのラッパーがとても気に入っています。

http://www.github.com/weixiyen/jquery-filedrop

クラスdivを使用してドキュメント内の要素を定義した後、次のコマンドでドロップされたファイルを受け入れるように初期化できます。

function fileSetUploadPercent(percent, divID){

    var uploadString = "Uploaded " + percent + " %";

    $('#'.divID).text(uploadString);
}
function fileUploadStarted(index, file, files_count){

    var divID = getDivID(index, file);

    createFileUploadDiv(divID);     //create the div that will hold the upload status

    fileSetUploadPercent(0, divID); //set the upload status to be 0
}

function  fileUploadUpdate(index, file, currentProgress){

    //Logger.log("fileUploadUpdate(index, file, currentProgress)");

    var string = "index = " + index + " Uploading file " + file.fileName + " size is " + file.fileSize + " Progress = " + currentProgress;
    $('#status').text(string);

    var divID = getDivID(index, file);
    fileSetUploadPercent(currentProgress, divID);
}

function fileUploadFinished(index, file, json, timeDiff){

    var divID = getDivID(index, file);
    fileSetUploadPercent(100, divID);

    if(json.status == "OK"){
        createThumbnailDiv(index, file, json.url, json.thumbnailURL);
    }
}



function    fileDocOver(event){
    $('#fileDropTarget').css('border', '2px dashed #000000').text("Drop files here");
}
$(".fileDrop").filedrop({

            fallback_id: 'fallbackFileDrop',
            url: '/api/upload.php',
            //    refresh: 1000,
            paramname: 'fileUpload',
            //    maxfiles: 25,           // Ignored if queuefiles is set > 0
            maxfilesize: 4,         // MB file size limit
            //    queuefiles: 0,          // Max files before queueing (for large volume uploads)
            //    queuewait: 200,         // Queue wait time if full
            //    data: {},
            //    headers: {},
            //    drop: empty,
            //    dragEnter: empty,
            //    dragOver: empty,
            //    dragLeave: empty,
            //    docEnter: empty,
            docOver: fileDocOver,
        //  docLeave: fileDocLeave,
            //  beforeEach: empty,
            //   afterAll: empty,
            //  rename: empty,
            //  error: function(err, file, i) {
            //    alert(err);
            //  },
            uploadStarted: fileUploadStarted,
            uploadFinished: fileUploadFinished,
            progressUpdated: fileUploadUpdate,
            //     speedUpdated
        });

アップロードを受け入れるWebページのビットにはこのHTMLがあります。

<div class='fileDrop'>
Upload a file by dragging it.
<span id='fileDropTarget'/>

</div>

ファイルドロップは外側の<div>で機能しますが、ユーザーがファイルをドロップする必要がある場所について混乱しないように、「DROPHERE」という大きなターゲットを作成すると便利です。

于 2012-07-27T08:31:26.337 に答える
1

おそらく遅すぎる。ただし、http://www.dropzonejs.com/をチェックアウトする必要があります

于 2015-03-02T14:35:30.343 に答える