当需要上传文件时，可以使用JS中的FormData类来实现。下面是实现文件上传的完整攻略：
创建一个表单
首先，要在HTML中创建一个表单，指定具体的上传文件的路径和上传方法：
<form action="upload.php" method="post" enctype="multipart/form-data">
<input type="file" name="file" />
<input type="submit" value="上传文件" />
</form>
获取文件并发送请求
使用JavaScript获取上传文件，并发送请求，这里使用Fetch API来发送POST请求
<script>
function uploadFile() {
var formData = new FormData();
var fileField = document.querySelector("input[type='file']");
formData.append("file", fileField.files[0]);
fetch('upload.php', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => {
console.log(data);
})
.catch(error => {
console.error(error)
})
}
</script>
在上例中，我们首先创建了一个FormData实例formData，接着获取了input元素的第一个文件，将其作为参数传递给append()方法，最后通过Fetch API来发送POST请求并处理响应结果。
服务器端代码
上传的文件必须在服务器端进行处理。因此，在你的服务器端代码中需要有上传文件的处理逻辑。
PHP处理上传文件的代码示例如下：
<?php
$target_dir = "uploads/";
$target_file = $target_dir . basename($_FILES["file"]["name"]);
$uploadOk = 1;
$imageFileType = strtolower(pathinfo($target_file,PATHINFO_EXTENSION));
// 检查文件大小
if ($_FILES["file"]["size"] > 500000) {
echo "文件过大，请重新上传";
$uploadOk = 0;
}
// 检查文件类型
if($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg"
&& $imageFileType != "gif" ) {
echo "只允许上传 jpg, jpeg, png 和 gif 文件";
$uploadOk = 0;
}
// 检查文件是否存在，并移动到指定目录
if ($uploadOk == 0) {
echo "上传失败";
} else {
if (move_uploaded_file($_FILES["file"]["tmp_name"], $target_file)) {
echo "文件成功上传到目录下：" . $target_file;
} else {
echo "上传失败";
}
}
?>
在服务器端处理上传文件的逻辑中，我们检查了文件的大小和类型，并将上传的文件移动到指定目录下。如果上传文件成功，则返回文件上传成功信息，否则返回错误信息。
示例
下面是两个上传文件的示例。第一个示例将上传照片，并在上传成功后展示上传的照片。
<html>
<body>
<form action="upload_photo.php" method="post" enctype="multipart/form-data">
<input type="file" name="file" id="file">
<input type="submit" value="上传照片" onclick="uploadPhoto()">
</form>
<div id="photo"></div>
</body>
<script>
function uploadPhoto() {
var formData = new FormData();
var fileField = document.querySelector("#file");
formData.append("file", fileField.files[0]);
fetch('upload_photo.php', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => {
console.log(data);
let image = document.createElement('img');
image.src = data.fileUrl;
document.getElementById('photo').appendChild(image);
})
.catch(error => {
console.error(error)
})
}
</script>
</html>
第二个示例将上传音乐文件，并在上传成功后播放音乐文件。
<html>
<body>
<form action="upload_music.php" method="post" enctype="multipart/form-data">
<input type="file" name="file" id="file">
<input type="submit" value="上传音乐文件" onclick="uploadMusic()">
</form>
<audio id="musicPlayer" controls></audio>
</body>
<script>
function uploadMusic() {
var formData = new FormData();
var fileField = document.querySelector("#file");
formData.append("file", fileField.files[0]);
fetch('upload_music.php', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => {
console.log(data);
let musicPlayer = document.getElementById('musicPlayer');
musicPlayer.src = data.fileUrl;
})
.catch(error => {
console.error(error)
})
}
</script>
</html>
在上传成功后，我们通过HTML5 Audio API来播放音乐文件。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JS中FormData类实现文件上传 - Python技术站
微信扫一扫 
支付宝扫一扫 