上传前显示图像预览

在我的 HTML 表单中，我已经输入了类型文件，例如:

 <input type="file" multiple>

然后通过单击输入按钮选择多个文件。 现在我想在提交表单之前显示所选图像的预览。如何在 HTML 5中做到这一点？

221866 次浏览
小开
最佳答案

下面是一个快速示例，通过将图像标记的 src属性设置为对象 URL，使用 URL.createObjectURL呈现缩略图:

Html 代码:

<input accept="image/*" type="file" id="files" />
<img id="image" />

The JavaScript code:

document.getElementById('files').onchange = function () {
var src = URL.createObjectURL(this.files[0])
document.getElementById('image').src = src
}

下面 HTML 示例中的代码片段从用户选择的图像中过滤出来，并将选定的文件呈现为多个缩略图预览:

function handleFileSelect (evt) {
// Loop through the FileList and render image files as thumbnails.
for (const file of evt.target.files) {
 

// Render thumbnail.
const span = document.createElement('span')
const src = URL.createObjectURL(file)
span.innerHTML =
`<img style="height: 75px; border: 1px solid #000; margin: 5px"` +
`src="${src}" title="${escape(file.name)}">`


document.getElementById('list').insertBefore(span, null)
}
}


document.getElementById('files').addEventListener('change', handleFileSelect, false);
<input type="file" accept="image/*" id="files" multiple />
<output id="list"></output>

小开

这里我使用 FileReaderAPI 处理 jQuery。

HTML 标记:

<input id="fileUpload" type="file" multiple />
<div id="image-holder"></div>

jQuery:

在 jQuery 代码中，首先检查文件扩展名。将 有效的图像文件处理，然后检查浏览器是否支持 文件阅读器 API，然后才处理其他显示受尊重的消息

$("#fileUpload").on('change', function () {
 

//Get count of selected files
var countFiles = $(this)[0].files.length;
 

var imgPath = $(this)[0].value;
var extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase();
var image_holder = $("#image-holder");
image_holder.empty();
 

if (extn == "gif" || extn == "png" || extn == "jpg" || extn == "jpeg") {
if (typeof (FileReader) != "undefined") {
 

//loop for each file selected for uploaded.
for (var i = 0; i < countFiles; i++) {
 

var reader = new FileReader();
reader.onload = function (e) {
$("<img />", {
"src": e.target.result,
"class": "thumb-image"
}).appendTo(image_holder);
}
 

image_holder.show();
reader.readAsDataURL($(this)[0].files[i]);
}
 

} else {
alert("This browser does not support FileReader.");
}
} else {
alert("Pls select only images");
}
});
小开 

function handleFileSelect(evt) {
var files = evt.target.files;


// Loop through the FileList and render image files as thumbnails.
for (var i = 0, f; f = files[i]; i++) {


// Only process image files.
if (!f.type.match('image.*')) {
continue;
}


var reader = new FileReader();


// Closure to capture the file information.
reader.onload = (function(theFile) {
return function(e) {
// Render thumbnail.
var span = document.createElement('span');
span.innerHTML =
[
'<img style="height: 75px; border: 1px solid #000; margin: 5px" src="',
e.target.result,
'" title="', escape(theFile.name),
'"/>'
].join('');
          

document.getElementById('list').insertBefore(span, null);
};
})(f);


// Read in the image file as a data URL.
reader.readAsDataURL(f);
}
}


document.getElementById('files').addEventListener('change', handleFileSelect, false);
<input type="file" id="files" multiple />
<output id="list"></output>

小开

对于背景图像，请确保使用 url()

node.backgroundImage = 'url(' + e.target.result + ')';
小开

Without FileReader, we can use URL.createObjectURL method to get the DOMString that represents the object ( our image file ).

Don't forget to validate image extension.

<input type="file" id="files" multiple />
<div class="image-preview"></div>

let file_input = document.querySelector('#files');
let image_preview = document.querySelector('.image-preview');


const handle_file_preview = (e) => {
let files = e.target.files;
let length = files.length;


for(let i = 0; i < length; i++) {
let image = document.createElement('img');
// use the DOMstring for source
image.src = window.URL.createObjectURL(files[i]);
image_preview.appendChild(image);
}
}


file_input.addEventListener('change', handle_file_preview);

提交答案