在 JavaScript 中上传文件的例子
本文解释了我们如何从文件选择器对话框中选择一个文件,并使用 fetch
方法将所选文件上传到我们的服务器。我们需要将我们选择的文件数据附加到表单数据对象中,以将任何文件上传到我们的后端服务器存储中。
let formData = new FormData();
formData.append("file", fileupload.files[0]);
在 HTML 中使用 JavaScript 上传文件示例
我们将制作一个文件
类型的输入表单,以从我们的 pc/系统存储中选择任何扩展名的文件。将有一个按钮来调用函数 uploadFile()
,该函数会将文件数据附加到表单数据对象中,并使用 fetch 方法简单地将表单数据上传到我们的服务器。fetch
方法在 JavaScript 中用于网络请求,作为 API 调用,用于从前端获取或上传任何数据到后端。
<!DOCTYPE html>
<html>
<head>
<title>
HTML | File upload example
</title>
<script type="text/javascript">
</script>
</head>
<body>
<h2>Hi Users Choose your file and Click upload.</h2>
<!-- Input Form Elements HTML 5 -->
<input id="fileupload" type="file" name="fileupload" />
<button id="upload-button" onclick="uploadFile()"> Upload file </button>
<!-- File Upload Logic JavaScript -->
<script>
async function uploadFile() {
//creating form data object and append file into that form data
let formData = new FormData();
formData.append("file", fileupload.files[0]);
//network request using POST method of fetch
await fetch('PASTE_YOUR_URL_HERE', {
method: "POST",
body: formData
});
alert('You have successfully upload the file!');
}
</script>
</body>
<html>
在上面的 HTML
页面源代码中,你可以看到文件
的简单输入表单类型,通过单击选择文件
从用户本地系统存储中获取文件数据,并且有一个上传文件
按钮来调用我们的声明函数并继续执行该功能。
在此前端网页上,你还可以看到带有所选文件扩展名的名称。
在这里,你可以看到 <script>
标签,这是在 doctype html 中使用 javaScript
语句所必需的。在这些标签中,我们声明了 uploadFile()
。
该函数包含一个表单数据对象,文件将附加到该表单数据对象中,并使用 fetch POST
方法调用网络请求;文件数据将以网络请求的形式发送。
在下一步中,如果文件上传成功的话,function()
向用户显示一个警告框 You have successfully upload the file!
。
使用 JavaScript 上传/选择文件的替代方法
你也可以达到如下所示的相同结果。你可以使用 document.createElement() 方法
创建一个带有 type="file"
的 <input>
元素。
我们可以使用 getElementById()
方法简单地访问带有 type="file"
的 <input>
元素。
var data = document.getElementById("my_file");
<button onclick="myFunction()">Choose file</button>
<script>
function myTestFunction() {
var data = document.createElement("INPUT");
data.setAttribute("type", "file");
document.body.appendChild(data);
}
</script>
在上面的例子中,var data
分配了 document.createElement("INPUT");
函数,我们需要设置文件类型的数据属性。
在下一步中,我们需要在 document.body
上添加 appendChild
数据。