共计 3008 个字符，预计需要花费 8 分钟才能阅读完成。
摘要
很多场景下须要抉择多张图片上传，或者是批量上传以提高效率，多图上传的需要天然就比拟多了，本文应用最简略的 XMLHttpRequest 异步上传图片。
界面
上传示例
代码
index.html
<!DOCTYPE html>
<html>
<head>
<title> 多图上传 </title>
<meta charset="utf-8">
<style>
#fileInput{
width: 500px;
height: 45px;
margin: 50px auto 0;
background: #eee;
display: block;
padding: 20px 20px;
border-radius: 20px;
}
#previewContainer{
width: 500px;
margin: 10px auto;
background: #eee;
padding: 20px 20px;
display: none;
}
.preview-image {
max-width: 200px;
max-height: 200px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<!-- 抉择文件 -->
<input type="file" id="fileInput" accept="image/*" multiple>
<div id="previewContainer"></div>
<script>
const fileInput = document.getElementById('fileInput');
const previewContainer = document.getElementById('previewContainer');
// 监听抉择文件
fileInput.addEventListener('change', handleFileSelect);
function handleFileSelect(event) {
const files = event.target.files;
for (let i = 0; i < files.length; i++) {const file = files[i];
const reader = new FileReader();
reader.onload = function(event) {const image = document.createElement('img');
image.className = 'preview-image';
image.src = event.target.result;
previewContainer.appendChild(image);
// 将文件上传至服务器
uploadImage(file);
}
reader.readAsDataURL(file);
}
}
// 将文件上传至服务器
function uploadImage(file) {const xhr = new XMLHttpRequest();
const formData = new FormData();
// 将文件增加到 formData 对象
formData.append('image', file);
// 设置 XHR 申请的处理函数
xhr.onreadystatechange = function() {if (xhr.readyState === XMLHttpRequest.DONE) {if (xhr.status === 200) {console.log('上传胜利');
// 显示图片预览区域
document.querySelector('#previewContainer').setAttribute('style', 'display:block');
// 打印 JSON
console.log(JSON.parse(xhr.response))
} else {console.log('上传失败');
}
}
}
// 发送 POST 申请到服务器
xhr.open('POST', 'upload.php', true);
xhr.send(formData);
}
</script>
</body>
</html>upload.php
（请建设一个 upload 文件夹以寄存上传的文件）
<?php
// 编码
header("Content-type:application/json");
// 查看是否有文件上传
if (isset($_FILES['image'])) {
// 获取上传的文件信息
$file = $_FILES['image'];
// 获取文件名
$fileName = $file['name'];
// 获取文件的长期门路
$tmpFilePath = $file['tmp_name'];
// 指定保留目录
$uploadDir = 'upload/';
// 验证是否为图片文件
if ((($_FILES["image"]["type"] == "image/gif")
|| ($_FILES["image"]["type"] == "image/jpeg")
|| ($_FILES["image"]["type"] == "image/jpg")
|| ($_FILES["image"]["type"] == "image/pjpeg")
|| ($_FILES["image"]["type"] == "image/x-png")
|| ($_FILES["image"]["type"] == "image/png"))
&& ($_FILES["image"]["size"] < 10485760)){
// 生成惟一的文件名
$uniqueFileName = uniqid() . '_' . $fileName;
// 拼接保留门路
$uploadPath = $uploadDir . $uniqueFileName;
// 获取 HTTP 协定
function get_http_type(){$http_type = ((isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] == 'on') || (isset($_SERVER['HTTP_X_FORWARDED_PROTO']) && $_SERVER['HTTP_X_FORWARDED_PROTO'] == 'https')) ? 'https://' : 'http://';
return $http_type;
}
// 将临时文件挪动到指标门路
if (move_uploaded_file($tmpFilePath, $uploadPath)) {
// 上传胜利
// 能够在此处进行进一步解决，比方生成缩略图、增加水印等
$result = array(
'code' => 200,
'msg' => '上传胜利',
'url' => get_http_type().dirname($_SERVER['HTTP_HOST'].$_SERVER['PHP_SELF']).'/'.$uploadPath
);
} else {
// 上传失败
$result = array(
'code' => 202,
'msg' => '文件上传失败'
);
}
}else{
// 不合规的文件
$result = array(
'code' => 202,
'msg' => '不合规的文件'
);
}
} else {
// 没有文件上传
$result = array(
'code' => 202,
'msg' => '没有抉择要上传的文件'
);
}
// JSON
echo json_encode($result, JSON_UNESCAPED_UNICODE);
?>作者
TANKING
正文完
发表至： javascript
2023-07-10
