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

如何顯示我輸入的圖像

JavaScript

函數(shù)式編程 2023-03-03 09:58:51

我制作了一個(gè)將圖像作為輸入的按鈕，但我找不到顯示圖片的方法。我試圖制作一個(gè)空元素，然后像我在其他網(wǎng)站上看到的那樣更改其 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貢獻(xiàn)1842條經(jīng)驗(yàn) 獲得超13個(gè)贊

代碼中需要一些修復(fù)，必須讀取文件并創(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">

反對(duì) 回復(fù) 2023-03-03

MMTTMM

TA貢獻(xiàn)1869條經(jīng)驗(yàn) 獲得超4個(gè)贊

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

反對(duì) 回復(fù) 2023-03-03

月關(guān)寶盒

TA貢獻(xiàn)1772條經(jīng)驗(yàn) 獲得超5個(gè)贊

試試這個(gè)，它對(duì)我有用

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

反對(duì) 回復(fù) 2023-03-03