原生JS实现前端本地文件上传

当我们需要在前端实现文件上传的功能时,可以使用原生的JavaScript代码来实现。下面是一个完整的攻略,包含了前端上传文件需要用到的一些知识点。

1. 获取文件上传的节点

要上传文件,需要在页面上放置一个文件上传的节点,通常使用HTML中的<input type="file" />元素。获取节点的方式可以使用原生JavaScript中的 getElementById()方法或querySelector()方法。

<input type="file" id="uploadFile" accept=".txt" />
//使用getElementById()方法获取上传文件节点
const inputNode =  document.getElementById('uploadFile');

//使用querySelector()方法获取上传文件节点
const inputNode =  document.querySelector('#uploadFile');

accept属性是用来限制上传文件的类型。

2. 监听文件上传事件

要实现上传操作我们需要监听文件的上传事件,然后在事件触发时执行上传操作。

const inputNode = document.querySelector('#uploadFile');

inputNode.addEventListener('change', handleUpload);

function handleUpload (event) {
 //上传操作
}

3. 上传操作

获取选定的文件对象后,通过AJAX将文件上传到服务器。这里我们使用 XMLHttpRequest 对象来发送HTTP请求。

function handleUpload (event) {
  const file = event.target.files[0];
  const formData = new FormData();

  formData.append('file', file, file.name);

  const xhr = new XMLHttpRequest();

  xhr.open('POST', '/upload');

  xhr.onload = function () {
    console.log('上传成功!');
  };

  xhr.send(formData);
}

示例1

下面是一个使用原生JS实现以POST形式上传JSON文件的示例:

<!DOCTYPE html>
<html>
  <head>
    <title>前端上传文件</title>
  </head>
  <body>
    <input type="file" id="uploadFile" accept=".json" />
    <button id="submit">提交</button>

    <script>
      const inputNode = document.querySelector('#uploadFile');
      const submitBtn = document.querySelector('#submit');
      inputNode.addEventListener('change', handleUpload);

      function handleUpload (event) {
        const file = event.target.files[0];
        const formData = new FormData();  
        formData.append('file', file, file.name);

        submitBtn.addEventListener('click',function () {
          const xhr = new XMLHttpRequest();     
          xhr.open('POST', '/uploadData');        
          xhr.onload = function () {
            console.log('上传成功!');
          };
          xhr.send(formData);
        });
      }
    </script>
  </body>
</html>

服务端代码示例(使用Node.js):

const express = require('express');
const app = express();
const port = 3000;

const bodyParser = require('body-parser');
app.use(bodyParser.json());

const fs = require('fs');

app.post('/uploadData', (req, res) => { 
  const file = req.files.file;
  const savePath = './' + file.name;

  const data = JSON.parse(fs.readFileSync(file.path));
  fs.writeFileSync(savePath, JSON.stringify(data));

  res.send('文件上传成功!'); 
});

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`);
});

示例2

下面是一个使用原生JS实现以POST形式上传图片文件的示例:

<!DOCTYPE html>
<html>
  <head>
    <title>前端上传文件</title>
  </head>
  <body>
    <input type="file" id="uploadImage" accept="image/*"/>
    <button id="submit">提交</button>

    <script>
      const inputNode = document.querySelector('#uploadImage');
      const submitBtn = document.querySelector('#submit');
      inputNode.addEventListener('change', handleUpload);

      function handleUpload (event) {
        const file = event.target.files[0];
        const formData = new FormData();  
        formData.append('file', file, file.name);

        submitBtn.addEventListener('click',function () {
          const xhr = new XMLHttpRequest();     
          xhr.open('POST', '/uploadImage');        
          xhr.onload = function () {
            console.log('上传成功!');
          };
          xhr.send(formData);
        });
      }
    </script>
  </body>
</html>

注意:由于浏览器的安全性限制,不能直接使用XMLHttpRequest来上传文件。可以使用第三方库(如jQuery,axios等)或者formData的API来实现。

服务端代码示例(使用Node.js):

const express = require('express');
const app = express();
const port = 3000;

const bodyParser = require('body-parser');
app.use(bodyParser.json());

const fs = require('fs');

app.post('/uploadImage', (req, res) => { 
  const file = req.files.file;
  const savePath = './' + file.name;

  fs.copyFileSync(file.path, savePath);

  res.send('文件上传成功!'); 
});

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`);
});

以上是两个使用原生JS实现前端本地文件上传的示例,如有疑问可以参考更多相关的文档或资料。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:原生JS实现前端本地文件上传 - Python技术站

(0)
上一篇 2023年5月27日
下一篇 2023年5月27日

相关文章

  • JavaScript实现动态网页飘落的雪花

    一、前言 在网页设计中,为了增加节日气氛或者美化页面,经常会配上一些漂亮的特效。其中,飘雪效果是比较常见的一个效果。本篇文章主要介绍JavaScript实现动态网页飘落的雪花的详细攻略。 二、基本思路 主要思路是使用setInterval()函数对页面中的每一个雪花进行计算、控制其位置以及更新其状态,并使用CSS和HTML控制每个雪花的样式以及雪花的总数。 …

    JavaScript 2023年6月10日
    00
  • Bootstrap Multiselect 常用组件实现代码

    Bootstrap Multiselect 是基于 Bootstrap 样式的多选下拉列表组件,并提供了丰富的 API 以支持开发者进行定制化的配置。下面我将向你介绍如何使用 Bootstrap Multiselect,以及常用组件实现代码的完整攻略。 一、安装 Bootstrap Multiselect Bootstrap Multiselect 的最新版…

    JavaScript 2023年6月11日
    00
  • 一个不错的可以检测多中浏览器的函数和其它功能第2/2页

    函数概述 这是一个可以检测多种浏览器的 JavaScript 函数,它可以帮助你判断当前的浏览器类型和版本号,并且还可以检测浏览器是否支持某些功能。这个函数定义比较长,但是使用起来非常方便。下面是这个函数的代码: function detectBrowser() { var ua = navigator.userAgent; var browserName;…

    JavaScript 2023年6月11日
    00
  • 浅谈javascript面向对象程序设计

    浅谈JavaScript面向对象程序设计 什么是面向对象编程 面向对象编程(OOP)是一种编程模式,它将现实世界中的事物抽象为类,类与类之间进行交互与协作,通过封装、继承、多态等机制使得程序结构更加清晰、易于扩展与维护。 JavaScript中的面向对象 在JavaScript中,函数是一等公民,对象可以作为函数的参数或返回值,JavaScript中的面向对…

    JavaScript 2023年5月27日
    00
  • javascript常用方法总结

    作为网站作者,我可以为您提供“Javascript常用方法总结”的完整攻略。 1. 简介 Javascript是一种广泛应用于web开发的编程语言,它具有很多强大的方法,可以对页面上的元素进行操作、获取信息、修改样式等等。在本篇攻略中,我将为大家梳理一些常用的javascript方法及其使用方法,希望能对前端开发的同学有所帮助。 2. 常用方法 2.1. g…

    JavaScript 2023年5月17日
    00
  • Javascript获取数组中的最大值和最小值的方法汇总

    下面我来详细讲解一下“Javascript获取数组中的最大值和最小值的方法汇总”。 1. Math对象函数法 我们可以使用Math对象提供的max和min函数,来获取数组中的最大值和最小值: var arr = [1, 2, 3, 4, 5]; var max = Math.max.apply(null, arr); var min = Math.min.a…

    JavaScript 2023年5月27日
    00
  • JavaScript函数柯里化详解

    JavaScript函数柯里化详解 函数柯里化是一种常见的函数变换技术,通过对函数进行柯里化,可以使得这个函数更加灵活和具有复用性。本文将对JavaScript函数柯里化进行详细的讲解。 什么是函数柯里化 函数柯里化(Currying)是指将一个多参数函数转换为一系列单参数函数的技术,每个单参数函数都是原函数的一个变换。例如,将一个接受三个参数的函数f,转换…

    JavaScript 2023年5月27日
    00
  • 转换json格式的日期为Javascript对象的函数

    转换JSON格式的日期为Javascript对象的函数一般使用JSON.parse()函数实现。在JSON字符串中,日期被表示为字符串并以ISO 8601日期格式给出,如下所示: "2021-09-13T08:57:23Z" 要将此日期转换为Javascript对象,可以按照以下步骤进行操作: 1.创建一个JSON字符串,包含一个带有日期…

    JavaScript 2023年5月27日
    00
合作推广
合作推广
分享本页
返回顶部