jQuery Drag-and-Drop Bild-Upload-Funktionalität

Question

Ich versuche, mein eigenes einfaches AJAX-Bild-Upload-Skript über jQuery zu kodieren. Ich habe einige Plugins gefunden, aber sie sind viel zu speziell für das, was benötigt wird, und ich kann keine von ihnen richtig funktionieren.

Ich möchte nur irgendwie erkennen, wenn der Benutzer ein Bild auf die Seite zieht und ablegt. Von dort bin ich mir sicher, dass es nicht schwer ist, diese Daten hochzuladen und in ein/cache/Verzeichnis zu gehen und weitere Optionen zuzulassen.

aber jetzt bin ich total mit der Drag/Drop Funktionalität beschäftigt. Buchstäblich keine Ahnung, wie ich das angehen sollte. Welche Art von Event-Handler wird benötigt? Muss ich meinen eigenen Event-Handler selbst programmieren? Jeder Rat würde mehr als geschätzt werden

Answer 1

Welche Art von Event-Handler wird benötigt?

Drag'n'Drop benötigt einen HTML5-Browser - aber das sind jetzt fast alle.

Ich würde nicht von vorne anfangen, da es ziemlich viel Code benötigt - ich mag diesen Wrapper, der es als jQuery-Plugin implementiert.

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

Nachdem ein Element in dem Dokument mit Klasse div definieren, können Sie es initialisieren mit abgelegten Dateien zu akzeptieren:

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

Das Bit der Web-Seite, die Uploads hat HTML akzeptiert.

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

</div> 

Die Datei Drop arbeitet an den Außen <div> aber es ist schön, ein schönes, großes Ziel zu machen, die ‚DROP HERE‘, so dass Benutzer über nicht verwirrt sind, wo sie benötigen, um die Datei zu löschen.

Answer 2

Wahrscheinlich zu spät. Aber Sie sollten prüfen http://www.dropzonejs.com/