jQuery Drag-and-Drop Bild-Upload-Funktion

Welche Art von event-handler benötigt wird?

Drag ' N ' Drop erfordert einen HTML5-browser - aber das ist ziemlich viel alle von Ihnen jetzt.

Ich würde empfehlen nicht bei null anfangen, da es einiges an code notwendig - ich mag diese wrapper implementiert, dass es als jQuery plugin.

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

Nach der Definition ein element in das Dokument ein div mit der Klasse, können Sie ihn initialisieren, zu akzeptieren, fiel Dateien mit:

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

Wird das bit von der web-Seite, die akzeptiert uploads hat dies HTML.

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

</div>

Die Datei drop funktioniert auf der äußeren <div> aber es ist schön zu machen, einen schönen großen Ziel, der sagt, 'DROP', so dass die Benutzer nicht verwirrt darüber, wo Sie brauchen, um die drop-Datei.

InformationsquelleAutor Danack