web-dev-qa-db-fra.com

jQuery File Upload image d'aperçu

J'utilise le plugin jQuery File Upload ( http://blueimp.github.io/jQuery-File-Upload/ ) pour le téléchargement d'images pour mon site Web. J'ai regardé à travers ( https://github.com/blueimp/jQuery-File-Upload/wiki/Options ), mais je n'ai pas trouvé le paramètre pour assigner un élément pour afficher l'image. Alors, comment puis-je prévisualiser l'image sur la page Web avec ce plugin?

Je vous remercie.

jqueryjquery-file-upload
13
user1995781

Je ne pense pas que le plugin Jquery File Upload offre une fonctionnalité d'aperçu.

Mais vous pouvez facilement l'implémenter dans l'option d'ajout du plugin:

add: function (e, data) {
    if (data.files && data.files[0]) {
        var reader = new FileReader();
        reader.onload = function(e) {
            $('#target').attr('src', e.target.result);
        }
        reader.readAsDataURL(data.files[0]);
        ...
        data.submit();
    }
}

exemple en direct sans plugin BlueImp.

45
Fractaliste

Le plugin prend en charge les aperçus d'images bien que j'essaie de comprendre comment le redimensionner à une résolution plus élevée. Vous pouvez accéder à l'aperçu en faisant quelque chose comme ceci:

$('.fileupload-field')
  .fileupload({
     disableImageResize: false, 
     previewMaxWidth: 320, 
     previewMaxHeight: 320
  })
  .bind('fileuploadprocessalways', function(e, data)
  {
      var canvas = data.files[0].preview;
      var dataURL = canvas.toDataURL();
      $("#some-image").css("background-image", 'url(' + dataURL +')');

  })
9
Dex

"L'API du lecteur de fichiers n'est pas prise en charge dans IE-9. Pour prévisualiser l'image, procédez comme suit:

1> envoyez l'image au serveur en utilisant ajax> 2> Obtenez la source d'image du serveur après le téléchargement en tant que réponse 3> en utilisant la source d'image, ajoutez-la à la balise d'image d'aperçu "

1
user3080080