顯示輸入文件中的所選圖像

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

您必須使用文件閱讀器來驗證並允許預覽上傳的圖像。 瀏覽器有充分的理由不允許訪問本地系統文件，並且文件輸入將文件放置在允許瀏覽器訪問的臨時文件夾系統中。

這是如何使用文件閱讀器源的示例

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