下面我将详细讲解“Ajax上传图片及上传前先预览功能实例代码”的完整攻略。

1. 引言

在网页开发中，上传图片的功能可谓是必备之一。而为了给用户更好的体验，我们还需要提供上传前的图片预览功能。本文将介绍如何使用Ajax上传图片以及在上传前预览图片。

2. 实现步骤

2.1 HTML结构

首先，我们需要准备HTML结构，包括一个文件上传控件和一个图片预览容器。

<form enctype="multipart/form-data">
  <input type="file" name="file" onchange="previewImage(this)">
</form>
<div id="preview"></div>

2.2 预览图片功能

接下来，我们需要编写一个JavaScript函数来实现预览图片的功能。具体实现方式如下：

function previewImage(file) {
  var preview = document.querySelector('#preview');
  var reader = new FileReader();

  reader.onloadend = function () {
    preview.innerHTML = '<img src="' + reader.result + '" />';
  }

  if (file) {
    reader.readAsDataURL(file.files[0]);
  } else {
    preview.innerHTML = '';
  }
}

该函数包括以下几个步骤：

获取图片预览容器元素。
创建一个FileReader对象。
设置FileReader对象的onloadend事件处理程序，用于在读取完成后将图片数据添加到预览容器中。
如果文件存在，则调用FileReader对象的readAsDataURL()方法读取图片文件，并将结果传递给onloadend事件处理程序。
如果文件不存在，则清空预览容器。

2.3 Ajax上传图片

最后，我们需要使用Ajax上传图片。具体实现方式如下：

function uploadFile() {
  var fileInput = document.querySelector('input[type="file"]');
  var files = fileInput.files;

  if (files.length === 0) {
    alert('请选择一个文件！');
    return;
  }

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

  var xhr = new XMLHttpRequest();
  xhr.open('POST', 'upload.php', true);

  xhr.onload = function () {
    if (xhr.status === 200) {
      alert('文件上传成功！');
    } else {
      alert('文件上传失败！');
    }
  };

  xhr.onerror = function () {
    alert('文件上传失败！');
  };

  xhr.send(formData);
}

该函数包括以下几个步骤：

获取文件上传控件的值。
如果控件的值为空，则提示用户选择一个文件。
创建一个FormData对象，用于向服务器发送文件。
创建一个XMLHttpRequest对象，并设置请求方法为POST。
设置XMLHttpRequest对象的onload和onerror事件处理程序，用于在上传完成后通知用户上传结果。
发送FormData对象。

3. 示例

下面展示两个完整的示例，一个示例演示如何预览图片，另一个示例演示如何上传图片。

3.1 预览图片示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>预览图片示例</title>
</head>
<body>
  <form enctype="multipart/form-data">
    <input type="file" name="file" onchange="previewImage(this)">
  </form>
  <div id="preview"></div>

  <script>
    function previewImage(file) {
      var preview = document.querySelector('#preview');
      var reader = new FileReader();

      reader.onloadend = function () {
        preview.innerHTML = '<img src="' + reader.result + '" />';
      }

      if (file) {
        reader.readAsDataURL(file.files[0]);
      } else {
        preview.innerHTML = '';
      }
    }
  </script>
</body>
</html>

3.2 上传图片示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>上传图片示例</title>
</head>
<body>
  <form enctype="multipart/form-data">
    <input type="file" name="file">
    <button type="button" onclick="uploadFile()">上传</button>
  </form>

  <script>
    function uploadFile() {
      var fileInput = document.querySelector('input[type="file"]');
      var files = fileInput.files;

      if (files.length === 0) {
        alert('请选择一个文件！');
        return;
      }

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

      var xhr = new XMLHttpRequest();
      xhr.open('POST', 'upload.php', true);

      xhr.onload = function () {
        if (xhr.status === 200) {
          alert('文件上传成功！');
        } else {
          alert('文件上传失败！');
        }
      };

      xhr.onerror = function () {
        alert('文件上传失败！');
      };

      xhr.send(formData);
    }
  </script>
</body>
</html>

以上就是“Ajax上传图片及上传前先预览功能实例代码”的攻略。希望对您有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Ajax上传图片及上传前先预览功能实例代码 - Python技术站