HTML+JavaScript 实现点击上传时将文件路径发送至后台
时间: 2023-12-09 12:03:20 浏览: 32
可以通过以下步骤实现:
1. 在 HTML 中创建一个文件上传表单,如下所示:
```html
<form id="uploadForm">
<input type="file" name="fileToUpload" id="fileToUpload">
<input type="button" value="Upload" onclick="uploadFile()">
</form>
```
其中,`input` 标签的 `type` 属性为 `file`,表示这是一个文件上传控件。`onclick` 事件绑定一个名为 `uploadFile` 的 JavaScript 函数,用于上传文件。
2. 在 JavaScript 中实现 `uploadFile` 函数,如下所示:
```javascript
function uploadFile() {
var fileInput = document.getElementById("fileToUpload");
var filePath = fileInput.value;
var fileExt = filePath.split('.').pop().toLowerCase();
if (fileExt != "txt") {
alert("Only .txt files are allowed!");
return;
}
var formData = new FormData();
formData.append("fileToUpload", fileInput.files[0]);
var xhr = new XMLHttpRequest();
xhr.open("POST", "upload.php", true);
xhr.onload = function() {
if (xhr.status === 200) {
alert("File uploaded successfully!");
} else {
alert("File upload failed!");
}
};
xhr.send(formData);
}
```
该函数首先获取文件上传控件的值,然后根据文件扩展名进行检查,只允许上传 `.txt` 格式的文件。接着创建一个 `FormData` 对象,将文件添加到其中,并使用 `XMLHttpRequest` 对象将文件上传至后台。上传完成后根据响应状态进行提示。
3. 在后台编写一个文件上传接口,如下所示:
```php
<?php
if ($_FILES["fileToUpload"]["error"] > 0) {
echo "Error: " . $_FILES["fileToUpload"]["error"] . "<br>";
} else {
$target_dir = "uploads/";
$target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]);
move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file);
echo "File uploaded successfully!";
}
?>
```
该接口首先检查文件上传过程中是否出错,如果没有错误则将文件保存至指定目录,并返回上传成功的消息。
这样就可以实现点击上传时将文件路径发送至后台的功能了。