php如何上传图片客户端和服务器端
PHP是一种用于Web开发的脚本语言，在进行Web开发过程中，常常需要进行文件上传。其中，图片上传是比较常见的一种需求。本文将介绍如何使用PHP实现客户端和服务器端图片上传。具体内容将包括：
1. 客户端图片上传
2. 服务器端图片上传
3. 完整图片上传示例
客户端图片上传
客户端图片上传，简单来说就是将图片文件从用户的计算机上传至服务器。在HTML中，我们可以通过<input type="file">标签来创建一个文件上传表单元素，如下所示：
<form action="upload.php" method="post" enctype="multipart/form-data">
<input type="file" name="image">
<input type="submit" value="Upload">
</form>
在表单的action属性指定服务器端处理上传文件的页面。enctype属性指定了请求的编码类型，必须设置为multipart/form-data。这样，当用户在上传表单中选择文件并提交表单时，选择的文件将被编码为一组键值对，格式如下：
-----------------------------2784844182705171210059585097
Content-Disposition: form-data; name="image"; filename="test.jpg"
Content-Type: image/jpeg
[Image data]
-----------------------------2784844182705171210059585097--
其中filename属性指定了上传文件的文件名，Content-Type指定了上传文件的MIME类型。
如果想要在用户选择文件后，即时显示选中的图片，可以使用JavaScript的FileReader对象。如下所示：
<input type="file" id="upload" onchange="previewFile()">
<img src="" id="preview">
<script>
function previewFile() {
var preview = document.querySelector('#preview');
var file = document.querySelector('#upload').files[0];
var reader = new FileReader();
reader.onloadend = function () {
preview.src = reader.result;
}
if (file) {
reader.readAsDataURL(file);
} else {
preview.src = "";
}
}
</script>
上述代码中，我们通过querySelector方法获取了一个<img>元素和一个<input type="file">元素。当用户选择了图片文件时，会触发onchange事件，并调用previewFile函数。该函数创建了一个FileReader对象，通过调用readAsDataURL方法将用户选择的图片文件读取成Base64编码的字符串，最后将该字符串设置为<img>元素的src属性值，从而即时显示选择的图片。
服务器端图片上传
客户端上传图片后，服务器端就需要接收上传的图片并进行处理，接下来我们将介绍如何使用PHP实现服务器端图片上传。
PHP提供了move_uploaded_file函数，该函数可以将上传的文件从其临时路径移动到服务器端指定的位置。下面是一个简单的服务器端上传文件的PHP代码示例：
<?php
if (isset($_FILES['image'])) {
$target_dir = "uploads/";
$target_file = $target_dir . basename($_FILES["image"]["name"]);
if (move_uploaded_file($_FILES["image"]["tmp_name"], $target_file)) {
echo "The file " . basename($_FILES["image"]["name"]) . " has been uploaded.";
} else {
echo "Sorry, there was an error uploading your file.";
}
}
?>
上述代码中，通过判断$_FILES['image']是否存在，判断是否有文件上传。如果有，首先将目标上传路径指定为uploads文件夹下，然后通过move_uploaded_file函数将上传的图片文件从临时路径移动到uploads/目录下。如果成功移动文件，就打印出文件名并提示上传成功，否则提示上传失败。
完整图片上传示例
最后，我们将客户端图片上传和服务器端图片上传结合起来，示例代码如下：
上传表单：
<form action="upload.php" method="post" enctype="multipart/form-data">
<input type="file" name="image" id="upload">
<input type="submit" value="Upload">
</form>
图片预览：
<img src="" id="preview">
JavaScript代码：
<script>
function previewFile() {
var preview = document.querySelector('#preview');
var file = document.querySelector('#upload').files[0];
var reader = new FileReader();
reader.onloadend = function () {
preview.src = reader.result;
}
if (file) {
reader.readAsDataURL(file);
} else {
preview.src = "";
}
}
document.querySelector('#upload').addEventListener('change', previewFile);
</script>
服务器端PHP代码：
<?php
if (isset($_FILES['image'])) {
$target_dir = "uploads/";
$target_file = $target_dir . basename($_FILES["image"]["name"]);
if (move_uploaded_file($_FILES["image"]["tmp_name"], $target_file)) {
echo "The file " . basename($_FILES["image"]["name"]) . " has been uploaded.";
} else {
echo "Sorry, there was an error uploading your file.";
}
}
?>
上传图片的完整示例就介绍到这里了。希望可以帮助到大家。