web-dev-qa-db-ja.com

アップロードしたい画像をスイートアラートで表示するにはどうすればよいですか？

次のコードが機能していません。入力が変更されたときに画像をスワル（スウィートアラート）に表示したいのですが、何が機能していないのかわかりません。コンソールで次のエラーが発生します。

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

[〜＃〜] input [〜＃〜]

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

スクリプト

<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 [〜＃〜]

Adaneoの応答で、.files[0];を追加してファイル名を読み取ることができましたが、画像パスを取得する方法がわかりません。コードに示されているように、imageという名前の変数を配置しようとしましたが、undefinedになります。

javascriptjqueryfilereadersweetalert
5
I_like_trains

渡す引数thefileは、ファイルではなくDOM要素です。

要素全体ではなく、ファイルを渡したい

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

これにより、最初の（そして、「複数」が設定されていないため）ファイルが選択され、FileReaderに渡されます。

reader.onloadendは非同期であるため、swal（）関数をコールバック内に配置する必要があります

インラインJavaScriptを使用せずに、これを行う別の方法があります

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

@adeneoの返信とともに、swalについてさらに追加したいと思います。最新のswalのドキュメントによると、次のようになります。

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

もちろん、htmlタグには何でも入れることができます。

0
Chaudhry Waqas