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

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>

UPDATE

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

Answer 1

您传入的参数thefile是 DOM 元素，而不是文件。

\n\n

您想要传递文件，而不是整个元素

\n\n

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

\n\n

选择第一个（也是唯一的，因为它没有“多个”集）文件并将其传递给 FileReader

\n\n

reader.onloadend是异步的，你必须将 swal() 函数放在回调中

\n\n

这是另一种方法，无需内联 javascript

\n\n

document.getElementById(\'input\').addEventListener(\'change\', function() {\n  var thefile = this.files[0];\n  var reader  = new FileReader();\n  reader.onload = function() {\n    swal({\n        title: "Esta \xc3\xa9 a imagem que pretende inserir?",\n        text: "<img src=\'" + reader.result + "\' style=\'width:150px;\'>",\n        html: true,\n    });\n  }\n  reader.readAsDataURL(thefile);\n}, false);\n

\n