Question

我有以下代码无效。我希望当输入改变时图像出现在swal（Sweet Alert）中，但我不知道什么不起作用。我在控制台上收到以下错误：

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>

更新

通过adaneo响应，我设法读取了添加.files[0];的文件名，但我现在还不知道如何获取图像路径，我试图将一个名为image的变量放在你可以看到的代码但转为undefined

Answer 1

您传入的参数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);

Answer 2

<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>

Answer 3

连同@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标记中放置任何内容。

如何在甜蜜警报中显示我要上传的图像？

3 个答案: