迹忆客 专注技术分享

当前位置:主页 > 学无止境 > WEB前端 > JavaScript >

在 JavaScript 中上传文件的例子

作者:迹忆客 最近更新:2024/03/22 浏览次数:

本文解释了我们如何从文件选择器对话框中选择一个文件,并使用 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 数据。

转载请发邮件至 1244347461@qq.com 进行申请,经作者同意之后,转载请以链接形式注明出处

本文地址:

相关文章

在 JavaScript 中闪烁文本

发布时间:2024/03/22 浏览次数:119 分类:JavaScript

本文将介绍如何通过窗口对象加载函数、onload 属性和使用 JavaScript 的 jQuery 约定来执行文本闪烁。

在 JavaScript 中高亮显示文本

发布时间:2024/03/22 浏览次数:103 分类:JavaScript

本教程向我们展示了如何使用 JavaScript 高亮显示文本。将用于此目的的方法是 searchPrompt 方法和标记标记方法,将使用代码段详细说明。

在 JavaScript 中创建哔声

发布时间:2024/03/22 浏览次数:119 分类:JavaScript

JavaScript 不具有任何直接的方法或属性来警告哔声或在特定函数上产生任何声音。但是该任务可以通过添加音频源并使用 JavaScript 音频功能使用 HTML 标记来完成。

扫一扫阅读全部技术教程

社交账号
  • https://www.github.com/onmpw
  • qq:1244347461

最新推荐

教程更新

热门标签

扫码一下
查看教程更方便