首頁猿問如何顯示我輸入的圖像

如何顯示我輸入的圖像

JavaScript

函數式編程 2023-03-03 09:58:51

我制作了一個將圖像作為輸入的按鈕，但我找不到顯示圖片的方法。我試圖制作一個空元素，然后像我在其他網站上看到的那樣更改其 URL，但它沒有用。HTML <input id="myImage" class="photo-upload" type="file" accept="image/*, image/jpeg"> <img id="the-picture" width="200" />JavaScripts const uploadPictureButton = document.querySelector(".photo-upload"); uploadPictureButton.addEventListener("click", displayPicture); function displayPicture(event) { let image = document.getElementById("myImage"); image.src = URL.createObjectURL(event.target.files[0]); };

查看完整描述

3 回答

紅顏莎娜

TA貢獻1842條經驗獲得超13個贊

代碼中需要一些修復，必須讀取文件并創(chuàng)建 URL，這里是代碼的工作片段。

const uploadPictureButton = document.querySelector(".photo-upload");

uploadPictureButton.addEventListener('change', function () {

displayPicture(this);

});

function displayPicture(input) {

if (input.files && input.files[0]) {

var reader = new FileReader();

reader.onload = function (e) {

document.getElementById('the-picture').setAttribute('src', e.target.result);

};

reader.readAsDataURL(input.files[0]);

}

<input

id="myImage"

class="photo-upload"

type="file"

accept="image/*, image/jpeg">

反對回復 2023-03-03

MMTTMM

TA貢獻1869條經驗獲得超4個贊

您也可以使用innerHTML來顯示圖像。

反對回復 2023-03-03

月關寶盒

TA貢獻1772條經驗獲得超5個贊

試試這個，它對我有用

<img height="100" width="100" alt="avatar" id="imgPreview> <input type="file" onchange="document.querySelector("#imgPreview").src = window.URL.createObjectURL(this.files[0])">

反對回復 2023-03-03