首页 > 编程语言 >JavaScript 文件上传

JavaScript 文件上传

时间:2023-01-29 15:56:14浏览次数:44  
标签:文件 formData JavaScript xhr file fileInput var 上传

JavaScript 可以使用表单提交来实现文件上传。首先,在 HTML 中创建一个文件输入框:

<input type="file" id="fileInput">

然后,在 JavaScript 中获取文件输入框的引用,并在其上设置事件监听器,如下所示:

var fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', function () {
  // 在这里处理选择的文件
});

在事件监听器中,可以使用 fileInput.files[0] 属性获取选择的文件,然后对文件进行处理。

接下来可以使用 XMLHttpRequestfetch API 来上传文件。

使用 XMLHttpRequest

var file = fileInput.files[0];
var formData = new FormData();
formData.append('file', file);

var xhr = new XMLHttpRequest();
xhr.open('POST', 'url', true);
xhr.onload = function () {
  if (xhr.status === 200) {
    console.log('upload success');
  }
};
xhr.send(formData);

使用 fetch

var file = fileInput.files[0];
var formData = new FormData();
formData.append('file', file);

fetch('url', {
  method: 'POST',
  body: formData
}).then(response => {
  if (response.ok) {
    console.log('upload success');
  }
});

另外还可以使用第三方库如 axios 来实现文件上传,具体实现方法可以参考相关文档。

标签:文件,formData,JavaScript,xhr,file,fileInput,var,上传
From: https://www.cnblogs.com/yuzhihui/p/17072894.html

相关文章

  • 安装VMware Tools,从本地主机上传文件到虚拟机
    一、在虚拟机上安装VMwareTools在虚拟机开机登陆后,我的上面的“安装VMwareTools”是点不了的,只能在开机的时候,可以点,点击重新安装VMwareTools,然后登录虚拟机  ......
  • 前端如何在上传图片实现图片预览
    <!DOCTYPEhtml><html> <head> <metacharset="utf-8"/> <title></title> </head> <body> <imgsrc=""alt=""> <inputtype="file"> </body> &l......
  • 重命名文件时,提示“必须键入文件名”的解决方法
    1、问题描述:新建文件夹,想把某个文件夹的名字改成".m2",但是却提示"必须键入文件名"2、解决方法:在该文件目录上输入cmd,进入命令行模式,输入rename原文件名字新的文件名......
  • 使用 JavaScript 从字符串中提取数字
    在JavaScript中,有多种方法可以从字符串中提取数字。一种方法是使用 match() 方法和正则表达式来搜索字符串中的所有数字。另一种方法是使用 replace() 方法和正则表达式从......
  • 解释 JavaScript 中计时器的工作原理
    在JavaScript中,计时器是一个非常值得注意的功能。与普通的手表计时器一样,我们可以一次启动计时器,并在特定时间后执行JavaScript中的函数或代码。简单来说,我们可以使用计......
  • odoo.conf配置文件
     1[options]2;addons文件的存放路径,和自定义模块的存放路径,绝对路径或者相对路径都可以,配置多个路径时要使用逗号分隔3addons_path=<path1>,<path2>4......
  • 【KAWAKO】MNN-将推理程序交叉编译成RK1126的可执行文件
    目录得到RK交叉编译器将交叉编译器添加进path对MNN进行交叉编译对自己的工程进行交叉编译将编译好的可执行文件和.so动态库放入板子中运行得到RK交叉编译器主要用到这两......
  • Ionic 保存图片文件异常 parent folder doesn't exist error parent folder doesn't e
    异常:使用插件Filesystem保存文件出现异常  异常引发的原因是:没有父文件存在解决方式:增加参数recursive:true(是否创建任何缺失的父目录)  可参考链接解决链接:h......
  • Linux上如何查找占用空间最大的文件来清理
    Linux上如何查找占用空间最大的文件来清理jiang0615csdn于2022-04-1511:15:41发布3998 收藏10分类专栏:Linux操作系统运维日常工作文章标签:linux运维版权......
  • vim自带的文件浏览器
    :Explore"打开文件浏览器,如果没有设置hidden,且文件没有保存时,会垂直分割,显示在上方,否则会占据整个vimwindow:Explore!"如果是分割的情况,变为水平分割"byth......