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

Question

我有以下代码不工作。当输入更改时，我希望图像出现在 swal(Sweet Alert)中，但我不知道什么不起作用。我在控制台上收到以下错误:

无法在“FileReader”上执行“readAsDataURL”:参数 1 不是“Blob”类型

输入

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