JavaScript实现图片上传并预览并提交ajax

JavaScript实现图片上传并预览并提交ajax，涉及到以下几个步骤：

1. 通过input元素选择图片文件；
2. 使用FileReader API将图片文件转换为base64格式的数据，并将其显示在页面上；
3. 将base64格式的图片数据发送到服务器端，并接收服务器端的响应。

下面是详细的攻略：

步骤一：选择图片文件

使用HTML中的<input>元素来选择图片文件。这里我们选择 type="file" 的 input 元素。

<input type="file" id="upload" accept="image/*">

其中，id属性用于获取DOM元素，accept属性限制上传的文件格式为图片类型。

然后可以在JS代码中获取该元素，并监听它的change事件：

const upload = document.querySelector('#upload')
upload.addEventListener('change', handleFileSelect, false)

当用户选择了图片文件后，调用handleFileSelect函数，将图片文件传递进去。

步骤二：将图片预览在页面上

使用FileReader API将图片文件转换为base64格式的数据，并将其显示在页面上。

function handleFileSelect() {
  const file = this.files[0]
  const reader = new FileReader()

  reader.onload = event => {
    const img = new Image()
    img.src = event.target.result
    document.body.appendChild(img)
  }

  reader.readAsDataURL(file)
}

在handleFileSelect函数中，首先获取用户选择的图片文件，并创建一个FileReader实例对象，然后为该实例对象添加一个onload事件处理函数。当文件读取完成后，该事件处理函数将被调用。

在该事件处理函数中，我们创建一个<img>元素，并将base64格式的图片数据赋值给该元素的src属性。最后将该元素添加到DOM文档中。

现在，我们已经成功将图片文件预览到页面中。

步骤三：提交图片数据到服务器端

最后一步是将图片发送给服务器端，需要使用XMLHttpRequest或fetch API实现ajax请求。

这里我们以fetch API为例：

function handleFileSelect() {
  const file = this.files[0]
  const reader = new FileReader()

  reader.onload = event => {
    const img = new Image()
    img.src = event.target.result
    document.body.appendChild(img)

    fetch('/upload', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ image: event.target.result })
    })
      .then(response => response.json())
      .then(data => console.log(data))
  }

  reader.readAsDataURL(file)
}

在该代码中，我们使用fetch函数发送一个POST请求到服务器端的/upload路由。请求头中设置Content-Type为application/json，请求体中包含图片的base64格式的数据。

在服务器端，我们可以接收到该请求，并使用base64格式的数据创建一个图片文件。

示例1：使用Node.js和express框架搭建服务器

const express = require('express')
const bodyParser = require('body-parser')
const fs = require('fs')
const path = require('path')

const app = express()
app.use(bodyParser.json())

app.post('/upload', (req, res) => {
  const image = req.body.image.split(',')[1] // 去掉base64数据前面的"data:image/png;base64,"字符串
  const buffer = Buffer.from(image, 'base64')
  const filename = `image_${Date.now().valueOf()}.png`
  const filepath = path.resolve(__dirname, filename)

  fs.writeFile(filepath, buffer, err => {
    if (err) {
      console.error(err)
      res.status(500).json({ message: 'Server Error' })
    } else {
      res.json({ message: 'File uploaded successfully' })
    }
  })
})

app.listen(8080, () => {
  console.log('Server started at http://localhost:8080')
})

在服务器端，我们使用express框架接收POST请求，并解析请求体中的JSON数据。然后将base64格式的数据转换为Buffer对象，并保存到服务器中。

示例2：使用PHP搭建服务器

<?php
if (isset($_POST['image'])) {
  $image = $_POST['image'];
  $image = str_replace('data:image/png;base64,', '', $image);
  $image = str_replace(' ', '+', $image);
  $data = base64_decode($image);

  $filename = 'image_' . time() . '.png';
  $filepath = './' . $filename;
  file_put_contents($filepath, $data);

  $response = array('message' => 'File uploaded successfully');
  echo json_encode($response);
}
?>

在PHP服务器端，我们通过$_POST全局变量获取请求体中的base64格式的图片数据，并将其转换为二进制数据。然后将二进制数据保存到服务器中，并返回一个JSON响应。