html5 fichier api exemple avec jquery?

Je voudrais utiliser html5 fichier api, en combinaison avec le drag n drop fonctionnalité (faites glisser un fichier externe sur une zone désignée et la capture de son contenu) et jquery. J'ai trouvé un travail non-jquery exemple: (html5 démo: fichier api)

 var drop = document.getElementById('drop');  
 drop.ondragover = function () {this.className = 'focus'; return false;};  
 drop.ondragend = function () { this.className = ''; return false; };  
 drop.ondrop=function(e) {  
          this.className = '';  
          e.preventDefault();  
          var file = e.dataTransfer.files[0];  
          var reader = new FileReader();  
          reader.onload = function (evt) {  
                console.log(evt.target.result);  
          }  
          reader.readAsText(file);  
      };

Cela fonctionne bien. Maintenant, je voudrais faire plus d'un jquery-ish et j'ai essayé:

 $("#drop").bind('ondragover',function() {this.addClass('focus'); return false;})
.bind("ondragend",function () { this.removeClass('focus'); return false;})  
.bind("ondrop",function(e) {  
         this.removeClass("focus");  
         e.preventDefault();  
         var file = e.dataTransfer.files[0];  
         var reader = new FileReader();  
         reader.onload = function (evt) {  
               console.log(evt.target.result);  
         }  
         reader.readAsText(file);  
     });

Mais cela ne fonctionne pas, aucun des bindings événements semble se déclencher. J'ai aussi essayé de perdre la partie pour le eventnames mais qui ne fonctionne pas.
Espérons que quelqu'un ici peut briller une lumière?

ce qui concerne,
jeroen.

InformationsquelleAutor dr jerry | 2011-01-18
  1. 21

    La solution est simple.

    1. Perdre la on préfixe (c'est pourquoi aucun des événements ont été jetés)
    2. this. => $(this). (c'est pourquoi, lorsque les événements ont été jetés, rien n'est arrivé, il a donné une erreur).

    Avec moi, il a travaillé.

    • yep c'était stupide (le $(this)). De toute façon pour aller jquery j'ai aussi faut décompresser l'origine de l'événement en faisant de l'e.originalEvent.dataTransfer. Merci pour votre réponse.
    InformationsquelleAutor Gidon
  2. 33

    Gidon description résout le problème. Ici est entièrement codé exemple dans le cas où quelqu'un d'autre est à la recherche à résoudre ce problème et veut obtenir plus de détails.

    JS:

    //Bindings to HTML; replace these with your components.
var $dropArea = $('#dropArea');
var $picsHolder = $('#picsHolder');
//Attach our drag and drop handlers.
$dropArea.bind({
dragover: function() {
$(this).addClass('hover');
return false;
},
dragend: function() {
$(this).removeClass('hover');
return false;
},
drop: function(e) {
e = e || window.event;
e.preventDefault();
//jQuery wraps the originalEvent, so we try to detect that here...
e = e.originalEvent || e;
//Using e.files with fallback because e.dataTransfer is immutable and can't be overridden in Polyfills (http://sandbox.knarly.com/js/dropfiles/).            
var files = (e.files || e.dataTransfer.files);
var $img = $('<img src="" class="uploadPic" title="" alt="" />');
for (var i = 0; i < files.length; i++) {
(function(i) {
//Loop through our files with a closure so each of our FileReader's are isolated.
var reader = new FileReader();
reader.onload = function(event) {
var newImg = $img.clone().attr({
src: event.target.result,
title: (files[i].name),
alt: (files[i].name)
});
//Resize large images...
if (newImg.size() > 480) {
newImg.width(480);
}
$picsHolder.append(newImg);
};
reader.readAsDataURL(files[i]);
})(i);
}
return false;
}
});

    CSS:

    #dropArea {
border: 10px dashed;
border-radius: 10px;
border-color: gray;
width: 200px;
height: 200px;
}
#dropArea:hover {
border-color: black;
}

    HTML:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="picsHolder"></div>
<div id="dropArea"></div>

    • ce qui m'a le fichier API, merci.
    • dû changer dragend à dragleave en chrome et en double removeclass dans drop
    • J'ai été frapper ma tête sur mon bureau pendant un certain temps avant que j'ai vu, ce - n'est généralement pas nécessaire d'ajouter les "corrections" pour Chrome, mais bon. Merci pour cette!
    InformationsquelleAutor Jacob