js图片上传的封装代码

下面是关于“js图片上传的封装代码”的详细攻略：

1. 首先了解图片上传的基本原理

在网页里，我们通常采用表单上传文件的方式来实现图片上传功能。在表单中，我们需要使用input元素来创建一个文件选择框，用户选择要上传的文件后，通过表单提交请求，服务器接收到文件后，将文件保存到指定的位置即可。

2. 了解JS实现图片上传的基本流程

在JS实现图片上传前，我们需要在网页中创建一个文件选择框，当用户选择好要上传的文件后，我们需要通过JS将文件发送到服务器。实现这个功能的关键是使用了XMLHttpRequest对象，它可以在不用刷新页面的情况下向服务器发送请求和接收响应。

下面是JS实现图片上传的基本流程：

• 创建一个input元素，用于选择要上传的文件。
• 监听input元素的change事件，当文件选择发生变化时获取文件信息。
• 创建FormData对象，将要上传的文件添加到其中。
• 创建XMLHttpRequest对象，打开一个POST请求，设置请求头和响应接收方式。
• 发送请求，等待服务器响应。

3. 将图片上传功能封装成JS函数

封装成JS函数后，我们只需要简单地调用该函数即可实现图片上传。

下面是将图片上传功能封装成为JS函数的代码示例：

function uploadImage(url, file, successCallback, failCallback) {
  let formData = new FormData();
  formData.append('file', file);

  let xhr = new XMLHttpRequest();
  xhr.open('POST', url, true);
  xhr.setRequestHeader('Content-Type', 'multipart/form-data');
  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4) {
      if (xhr.status === 200) {
        successCallback(xhr.responseText);
      } else {
        failCallback(xhr.responseText);
      }
    }
  };
  xhr.send(formData);
}

该函数接收以下参数：

• url: String类型，表示接收图片上传请求的服务器地址。
• file: File类型，表示要上传的图片文件。
• successCallback: Function类型，表示上传成功后调用的回调函数。
• failCallback: Function类型，表示上传失败后调用的回调函数。

4. 示例说明

示例1：实现图片上传功能

以下是一个实现图片上传功能的示例：

<input type="file" id="file">
<button id="uploadBtn">上传</button>

<script>
  const fileInput = document.getElementById('file');
  const uploadBtn = document.getElementById('uploadBtn');

  uploadBtn.addEventListener('click', function () {
    const url = 'https://your-server-url';
    const file = fileInput.files[0];

    uploadImage(url, file, function (result) {
      console.log('上传成功：' + result);
    }, function (result) {
      console.error('上传失败：' + result);
    });
  });
</script>

在以上示例中，我们通过监听上传按钮的点击事件，在用户选择图片后，调用uploadImage函数并传入必要的参数即可实现图片上传。

示例2：实现图片自动上传功能

以下是一个实现图片自动上传功能的示例：

<input type="file" id="file">
<div id="preview"></div>

<script>
  const fileInput = document.getElementById('file');
  const previewDiv = document.getElementById('preview');

  fileInput.addEventListener('change', function () {
    const url = 'https://your-server-url';
    const file = fileInput.files[0];

    uploadImage(url, file, function (result) {
      previewDiv.innerHTML = `<img src="${result}"/>`;
    }, function (result) {
      console.error('上传失败：' + result);
    });
  });
</script>

在以上示例中，我们通过监听文件选择框的change事件，自动上传用户选择的图片，并在上传成功后预览图片。