javascript结合fileReader 实现上传图片

这里是关于JavaScript结合FileReader实现上传图片的完整攻略。

什么是FileReader?

FileReader是HTML5中的一个API，用于访问本地文件并将文件内容读取到内存中。它可以读取文本、图像和音视频等资源，并将它们转换为可用的数据URL。

上传图片的基本步骤

要实现上传图片，我们需要先将选择的图片加载到内存中，然后再将它上传到服务器。

下面是实现上传图片的基本步骤：

1. 通过JavaScript获取上传图片的input元素。

html
<input type="file" id="upload">

javascript
var uploadInput = document.getElementById('upload');

1. 监听input元素的change事件，在事件回调函数中读取图片并将它显示到页面上。

javascript
uploadInput.addEventListener('change', function(event) {
var reader = new FileReader();
reader.readAsDataURL(event.target.files[0]);
reader.onload = function() {
var img = document.createElement('img');
img.src = reader.result;
document.body.appendChild(img);
}
});

在这个示例中，我们使用了FileReader的readAsDataURL方法将上传的图片读取到内存中，并使用onload事件获取读取结果。我们创建了一个img元素，将读取结果赋给它的src属性，并将它添加到页面中。

1. 将图片上传到服务器。

一般来说，我们会使用ajax来实现图片上传。示例代码如下：

javascript
uploadInput.addEventListener('change', function(event) {
var reader = new FileReader();
reader.readAsDataURL(event.target.files[0]);
reader.onload = function() {
var xhr = new XMLHttpRequest();
xhr.open('POST', '/upload');
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('image=' + encodeURIComponent(reader.result));
}
});

在这个示例中，我们使用XMLHttpRequest来发送POST请求。我们设置了请求的Content-Type头为application/x-www-form-urlencoded，同时发送了一个image参数，参数的值为读取结果的URL编码。

在服务器端，我们可以从请求参数中获取到上传的图片，并保存到服务器的文件系统中。

示例说明

下面分别是两个示例说明。

示例1：图片压缩并上传

这个示例展示了如何使用canvas将上传的图片进行压缩，并将压缩后的图片上传到服务器。

uploadInput.addEventListener('change', function(event) {
  var reader = new FileReader();
  reader.readAsDataURL(event.target.files[0]);
  reader.onload = function() {
    var img = new Image();
    img.src = reader.result;
    img.onload = function() {
      var canvas = document.createElement('canvas');
      var ctx = canvas.getContext('2d');
      canvas.width = 200;
      canvas.height = 200;
      ctx.drawImage(img, 0, 0, 200, 200);
      var dataURL = canvas.toDataURL();
      var xhr = new XMLHttpRequest();
      xhr.open('POST', '/upload');
      xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
      xhr.send('image=' + encodeURIComponent(dataURL));
    }
  }
});

在这个示例中，我们首先将上传的图片读取到内存中，然后创建一个Image对象，并将读取结果赋给它的src属性。在Image对象的onload事件回调函数中，我们创建一个canvas元素并设置它的宽高为200。之后，我们使用canvas的drawImage方法将Image对象绘制到canvas上，并使用canvas的toDataURL方法将canvas内容转换为Base64格式的数据URL。最后，我们将Base64数据URL作为参数发送到服务器。

示例2：显示上传进度

这个示例展示了如何在上传图片时显示上传进度。

uploadInput.addEventListener('change', function(event) {
  var reader = new FileReader();
  reader.readAsDataURL(event.target.files[0]);
  reader.onload = function() {
    var xhr = new XMLHttpRequest();
    xhr.open('POST', '/upload');
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xhr.upload.addEventListener('progress', function(event) {
      if (event.lengthComputable) {
        var percentComplete = event.loaded / event.total * 100;
        console.log(percentComplete);
      }
    }, false);
    xhr.send('image=' + encodeURIComponent(reader.result));
  }
});

在这个示例中，我们使用XMLHttpRequest的upload属性来监听上传进度。在progress事件回调函数中，我们计算上传进度并将它输出到浏览器的控制台中。

总结

以上就是关于JavaScript结合FileReader实现上传图片的攻略。在实际应用中，我们可以根据自己的需求对示例代码进行修改，从而实现更加灵活的功能。