显示从输入文件中选择的图像 [英] Display selected image from input file

问题描述

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

my question is how to display the selected file image from the input file in img tag, I have described the code below.

<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，并且不显示照片

but the result I got after changing the src attribute is: Not allowed to load local resource: file: /// C: /fakepath/Capture.PNG, and photos are not displayed

我不想使用ajax

推荐答案

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

You must use the file reader to validate and allow preview of the uploaded image. the browser disallows the access to local system files for good reason and the file inputs place files in a temporary folder system that the browser is allowed to access.

这里是如何使用文件阅读器的示例源

Here is an example of how to use the File Reader 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]);

这篇关于显示从输入文件中选择的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！