html5选择多张图片在页面内预览并上传到后台_html代码实现多张图片上传
<!DOCTYPE html>
<html>
<head>
<title>图片上传预览</title>
<meta charset="utf-8">
<script type="text/javascript">
function previewImages() {
var preview = document.querySelector('#image-preview');
var files = document.querySelector('input[type=file]').files;
function readAndPreview(file) {
// 确保`file.name`匹配我们想要的图片类型
if (/\.(jpe?g|png|gif)$/i.test(file.name)) {
var reader = new FileReader();
reader.addEventListener("load", function() {
var image = new Image();
image.height = 100; // 设置图片的高度
image.title = file.name; // 设置title为文件名
image.src = this.result; // `this.result`是base64编码的图片
preview.appendChild(image); // 将图片添加到预览容器中
}, false);
reader.readAsDataURL(file);
}
}
if (files) {
[].forEach.call(files, readAndPreview);
}
}
</script>
</head>
<body>
<input type="file" onchange="previewImages()" multiple>
<div id="image-preview"></div>
</body>
</html>这段代码使用了HTML5的File API来读取用户选择的图片文件，并使用FileReader来转换这些文件为可以在网页上显示的base64编码的图片URL。然后，它将每个图片预览添加到页面上的一个容器中。这个例子不包括上传到后台的部分，因为这涉及到服务器端的处理，通常需要使用JavaScript的XMLHttpRequest或现代的fetch API来完成。
评论已关闭