原生JavaScript+PHP多图上传实现示例
更新时间：2023年08月02日 11:31:20 作者：TANKING
这篇文章主要为大家介绍了原生JavaScript+PHP多图上传实现示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
摘要
很多场景下需要选择多张图片上传，或者是批量上传以提高效率，多图上传的需求自然就比较多了，本文使用最简单的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);
?>以上就是原生JavaScript+PHP多图上传实现示例的详细内容，更多关于原生JavaScript PHP多图上传的资料请关注脚本之家其它相关文章！
相关文章
涉及抢购、秒杀、抽奖、抢票等活动时，为了避免超卖,那么库存数量是有限的，但是如果同时下单人数超过了库存数量，就会导致商品超卖问题。那么我们怎么来解决这个问题呢，我的思路如下2017-04-04
这篇文章主要介绍了PHP实现模仿socket请求返回页面的方法,是socket通信非常实用的技巧,需要的朋友可以参考下2014-11-11
PHP的日期时间函数date()中介绍了PHP日期时间函数的简单用法，这类将介绍更多的函数来丰富我们的应用。2009-05-05
这篇文章主要介绍了php获取URL中带#号等特殊符号参数的解决方法,本文使用JS中的escape函数编码后传递解决这个问题,需要的朋友可以参考下2014-09-09
这篇文章主要介绍了php实现与erlang的二进制通讯实例解析,需要的朋友可以参考下2014-07-07
php批量删除数据...2007-01-01
这篇文章主要介绍了php强制运行广告的方法,通过session来实现记录访客访问次数进而调用弹窗广告来增加广告收入,是一个非常实用的技巧,需要的朋友可以参考下2014-12-12
我是一个PHP新手，只有6个月的PHP编程经历，并且是在一位经过认证的zend工程师的指导下完成工作的，每当我编写脚本时，我会注意一些能让我做得更好的细节2012-02-02
至于添加删除之类的功能我就不多写了!仔细看看就知道这么用了. 难的是显示方面 希望高手扩展一下! 这是类2008-03-03
这篇文章主要介绍了PHP实现HTTP断点续传的方法,实例分析了php基于http协议断点续传下载文件的实现方法,需要的朋友可以参考下2015-06-06
最新评论