web-dev-qa-db-fra.com

Comment puis-je afficher une image en alerte douce que je souhaite télécharger?

J'ai le code suivant ne fonctionne pas. Je veux que l'image apparaisse dans un swal (Sweet Alert) lorsque l'entrée est modifiée, mais je ne sais pas ce qui ne fonctionne pas. Je reçois l'erreur suivante sur la console:

Failed to execute'readAsDataURL' on 'FileReader': parameter 1 is not type 'Blob'

CONTRIBUTION

<input id="input" type="file" style="display:none;" onchange="muda()">

Script 

<script>
            function muda(){
                var thefile = document.getElementById('input');
                var reader = new FileReader();
                    reader.onloadend = function(){
                        var imagem = reader.result;
                    }
                        if(thefile){
                            reader.readAsDataURL(thefile);
                        }
                swal({
                  title: "Esta é a imagem que pretende inserir?",
                  text: "<img src='"+imagem+"' style='width:150px;'>",
                  html:true,
                });
            }
        </script>

UPDATE

Avec une réponse adaneo, j'ai réussi à lire le nom de fichier en ajoutant .files[0]; mais je ne sais pas comment obtenir le chemin de l'image maintenant, j'ai essayé de mettre une variable nommée image comme vous pouvez le voir dans le code, mais elle tourne undefined

javascriptjqueryfilereadersweetalert
5
I_like_trains

L'argument que vous transmettez, thefile, est un élément DOM, pas un fichier.

Vous voulez transmettre le fichier, pas l'élément entier

var thefile = document.getElementById('input').files[0];

Cela sélectionne le premier (et seulement, car il n’a pas de "multiple" set) fichier et le passe au FileReader

reader.onloadend est asynchrone, vous devez mettre votre fonction swal () dans le rappel

Voici une autre façon de faire cela, sans le javascript en ligne

document.getElementById('input').addEventListener('change', function() {
  var thefile = this.files[0];
  var reader  = new FileReader();
  reader.onload = function() {
    swal({
        title: "Esta é a imagem que pretende inserir?",
        text: "<img src='" + reader.result + "' style='width:150px;'>",
        html: true,
    });
  }
  reader.readAsDataURL(thefile);
}, false);
4
adeneo
<div onclick="imgClick(this)">
   <img src="image/img1.jpg" width="150px">

</div>

<script>
function imgClick(e){
    var src = $(e).find('img').attr('src');
    swal({
           title: "Hello World",
           text: "<img src='"+src+"' style='width:150px;'>",
           content:true,
        });
}

</script>
2
Tayyab Hayat

avec @adeneo répondre, je voudrais ajouter plus sur swal. Selon la dernière documentation swal, il devrait être comme suit 

swal({
  title: '<strong>HTML <u>example</u></strong>',
  type: 'info',
  html:
    'You can use <b>bold text</b>, ' +
    '<a href="//github.com">links</a> ' +
    'and other HTML tags',
});

vous pouvez bien sûr mettre n'importe quoi dans la balise html.

0
Chaudhry Waqas