html5 Image de téléchargement

Je suis en train de faire une TRÈS simple image uploader en html5.

<input type="file" multiple=""/>

Tout ce que je voudrais faire est d'afficher ce qui est téléchargé sans l'aide de PhP ou quoi que ce soit. Pourrais-je utiliser un code similaire à cela?

<img src="WHATEVER WAS UPLOADED"/>

Merci!

InformationsquelleAutor dualCore | 2012-01-17
  1. 5

    j'ai trouvé

    http://www.html5rocks.com/en/tutorials/file/dndfiles/

    plutôt utile.

    si vous ne voulez pas pousser l'image à un serveur ( je suppose qu'il est de votre question ), vous pouvez simplement mettre à jour l'image localement : 

    <style>
  .thumb {
    height: 75px;
    border: 1px solid #000;
    margin: 10px 5px 0 0;
    }
 </style>

<input type="file" id="files" name="files[]" multiple />
<output id="list"></output>

<script>
  function handleFileSelect(evt) {
    var files = evt.target.files; //FileList object

   //Loop through the FileList and render image files as thumbnails.
   for (var i = 0, f; f = files[i]; i++) {

     //Only process image files.
     if (!f.type.match('image.*')) {
       continue;
     }

     var reader = new FileReader();

     //Closure to capture the file information.
     reader.onload = (function(theFile) {
       return function(e) {
          //Render thumbnail.
          var span = document.createElement('span');
          span.innerHTML = ['<img class="thumb" src="', e.target.result,
                        '" title="', escape(theFile.name), '"/>'].join('');
          document.getElementById('list').insertBefore(span, null);
    };
      })(f);

      //Read in the image file as a data URL.
      reader.readAsDataURL(f);
    }
  }

  document.getElementById('files').addEventListener('change', handleFileSelect, false);

 </script>

    ou somesuch.

    • Pourriez-vous modifier cela pour l'acceptation d'une seule image uniquement (c'est à dire pas d'images multiples) et de supprimer la boucle de traitement? files est utilisée dans plusieurs endroits et je ne suis pas sûr de savoir si il est fait référence à la variable files ou l'id files ou le nom files donc je n'ai pas été en mesure de faire cette modification.
    • Cela semble fonctionner pour une seule image de la télécharger et de l'aperçu et est basé sur le code ci-dessus jsfiddle.net/rwone/4n8HW
    • Plus d'explications et plus de code peut être trouvé à partir de ce lien: html5rocks.com/en/tutorials/file/dndfiles
    InformationsquelleAutor k1dbl4ck
  2. 0

    Vous pourriez l'archivage de ce avec HTML5 Fichier Api.

    Tutoriel ci-dessous devrait vous aider à démarrer: La lecture de fichiers locaux en JavaScript

    • mais la lecture de fichiers locaux tutoriel utilise filereader,qui n'est pas le travail de l'IE. Il travaille pour le reste des navigateurs voir ici
    InformationsquelleAutor rasmusx