html 图片放在网页中心,html – 如何在网页上显示本地图片？

您可以使用FileReader.readAsDataURL()轻松地执行此操作.用户选择图像,您可以显示它,而无需上传它.

这是代码：

function previewFile() {

// Where you will display your image

var preview = document.querySelector('img');

// The button where the user chooses the local image to display

var file = document.querySelector('input[type=file]').files[0];

// FileReader instance

var reader = new FileReader();

// When the image is loaded we will set it as source of

// our img tag

reader.onloadend = function () {

preview.src = reader.result;

}

if (file) {

// Load image as a base64 encoded URI

reader.readAsDataURL(file);

} else {

preview.src = "";

}

}