如何使用Ajax发送图片

Ajax代表异步JavaScript和XML，用于对其他来源进行间接请求。它可以帮助您动态地对网页进行更改。

我们可以使用一个叫做 XMLHttpRequest 的特殊对象发起一个AJAX请求，该对象提供了不同的方法来生成HTTP请求。

语法：

xhr = new XMLHttpRequest();
xhr.onload = ()=>{...};
xhr.open(<method>,<url>);
xhr.send();

使用的方法:

open: 这个方法接受三个参数:
- method: HTTP方法
- url: 资源路径
- async/sync
send: 发送最终请求
onload: 监听响应

在这篇文章中，我们将学习如何使用AJAX上传图片。

方法:

要发送一张图片，我们需要发送一个post请求到服务器，并将图片转换成 DATAURL 格式后上传。

步骤:

使用一个文件输入按钮选择图片
添加一个 oninput 事件监听器，使用 e.target.files 属性获取上传的文件
使用 FileReader.readAsDataURL 方法将获取到的文件转换成dataurl
创建一个 XMLHttpRequest 实例
准备 POST 请求，并以字符串形式发送数据
在服务器端，我们使用express监听 POST 请求，地址为 localhost:3000

示例1: 下面是上述步骤的实现:

客户端: 这是客户端代码，用于将图片上传到服务器。

HTML

<html>
  <body>
      <input type="file"/>
    <script type="text/javascript">
        let result;
        let input = document.getElementsByTagName('input')[0];
        input.oninput=(e)=>{
            console.log(e);
            let file = e.target.files[0];
             const reader = new FileReader();
              reader.onload = (evt) => {
                    console.log(evt.target.result);
                    result = evt.target.result;
                          const xhr = new XMLHttpRequest();
      const url = 'http://localhost:3000/events';
 
      xhr.open('POST', url);
      xhr.send(result);
              };
              reader.readAsDataURL(file);
        }
    </script>
  </body>
</html>

服务器： 接受使用 EXPRESS post 监听器的图像

Javascript

'use strict';
 
const express = require('express');
run().catch(err => console.log(err));
async function run() {
    const app = express();
 
    app.post('/events', (req, res) => {
        res.set({
            'Cache-Control': 'no-cache',
            'Access-Control-Allow-Origin': '*'
        });
        req.on("data", (data) => {
            console.log(data.toString());
        })
        res.send();
    })
}

输出:

如何使用Ajax发送图片

在上述的GIF图像中，我们发现图像以DATAURL格式进行传输。左边的标签代表客户端，右边的大黑色标签代表服务器。

我们可以通过文件输入按钮选择图像，然后立即进行传输。

示例2： 在这个示例中，我们将发送一张图像，并在 img 标签中显示从服务器返回的图像。

客户端： 客户端在使用 xhr.onload 接收到图像后，会在 img 标签中显示图像，如下所示

HTML

<html>
 
<body>
    <input type="file" />
    <img src="" />
    <script type="text/javascript">
        let result;
        let input = document.getElementsByTagName('input')[0];
        input.oninput = (e) => {
            let file = e.target.files[0];
            const reader = new FileReader();
            reader.onload = (evt) => {
                result = evt.target.result;
                const xhr = new XMLHttpRequest();
                const url = 'http://localhost:3000/events';
                xhr.onload = (res) => {
                    document.getElementsByTagName('img')[0].src = res.target.response;
                }
 
                xhr.open('POST', url);
                xhr.send(result);
            };
            reader.readAsDataURL(file);
        }
 
    </script>
</body>
 
</html>

服务器： 服务器在监听“ data ”事件后，使用 status 和 send 方法将数据发送回去。

Javascript

var express = require('express');
var app = express();
 
app.post('/events', (req, res) => {
    res.set({
        'Cache-Control': 'no-cache',
        'Access-Control-Allow-Origin': '*'
    });
    req.on("data", (data) => {
        res.status(200);
        res.send(data.toString());
    })
})
app.listen(3000);

输出：

如何使用Ajax发送图片