Fonctionnalité de téléchargement de l'image par glisser-déposer jQuery

Je suis en train de code de mes propres AJAX simple image script d'upload via jQuery. J'ai trouvé quelques plugins, mais ils sont bien trop personnalisé pour ce qui est nécessaire, et je ne peux pas obtenir tout de leur travail correctement.

Je veux juste en quelque sorte à détecter lorsque l'utilisateur glisse et tombe d'une image sur la page. À partir de là, je suis sûr qu'il n'est pas difficile de télécharger des données et de la déplacer dans /cache/répertoire et de permettre plus d'options..

mais pour l'instant je suis totalement coincé avec le glisser/déposer. Littéralement aucune idée de comment je dois aborder cette. Quel type de gestionnaire d'événements est-elle nécessaire? Ai-je besoin de code personnalisé mon propre gestionnaire d'événement? Tout conseil serait plus apprécié

source d'informationauteur Jake

  1. 9

    Quel type de gestionnaire d'événements est-elle nécessaire?

    Drag'n'drop nécessite un navigateur HTML5 - mais c'est à peu près tout maintenant.

    Je vous recommande de ne pas commencer à partir de zéro, car il y a un peu de code nécessaire - j'aime assez ce wrapper qui la met en œuvre en tant que plugin jQuery.

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

    Après la définition d'un élément dans le document avec la classe div, vous pouvez l'initialiser à accepter les fichiers déposés avec:

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

    Les bits de la page web qui accepte les uploads a ce HTML.

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

    Le fichier drop travaille à l'extérieur sur le <div> mais il est agréable de faire une belle grosse cible qui dit "DÉPLACER ICI", de sorte que les utilisateurs ne sont pas confus au sujet de l'endroit où ils doivent déposer le fichier.

  2. 1

    Probablement trop tard. Mais vous devez caisse http://www.dropzonejs.com/