显示从输入文件中选择的图像

Question

我的问题是如何在img标签中显示从输入文件中选择的文件图像，我已经描述了下面的代码。

<img src="" width="200" height="100">
<input type="file" name="logo" id="upload-logo" />

$('#upload-logo').on('change', function(){
    let logo = $(this).val();
    $('img').attr('src', logo);
});

但是我改变src属性后得到的结果是：不允许加载本地资源：文件：///C:/fakepath/Capture.PNG，并且照片不显示

我不想使用 ajax

Answer 1

您必须使用文件阅读器来验证并允许预览上传的图像。浏览器有充分的理由不允许访问本地系统文件，文件输入将文件放在允许浏览器访问的临时文件夹系统中。

这是一个如何使用文件阅读器Source的示例

    const reader = new FileReader();

    reader.onload = function(e) {
        // do something with the result
        var file = reader.result || e.target.result;
    }
    reader.readAsDataURL(input.files[0]);