本文介绍如何在H5和JavaScript环境下实现移动端图片选取、预览以及利用canvas进行图像压缩，并最终完成文件上传。适合前端开发人员参考学习。
在JS移动端和H5开发过程中，经常需要处理用户选择的图片上传操作，在移动设备上这一需求尤其普遍。本段落将详细介绍如何实现同时选择多张图片并利用canvas进行压缩后上传的具体流程。
HTML5提供了``元素，通过添加`multiple`属性可以让用户在文件选择对话框中选取多个图片文件。例如：
```html
```
这里的`accept=image/*`确保了只能上传图片类型，而`multiple`属性允许用户选择多张图片。“”隐藏域用于存储最终上传的图片地址。
接下来需要监听文件输入元素的change事件，在用户选择了文件后触发此事件。JS代码如下：
```javascript
document.getElementById(upload).addEventListener(change, function(e) {
var files = e.target.files;
进行图片处理...
});
```
在执行实际操作前，通常会进行一些基本验证，例如检查文件是否为图片类型以及大小限制等。以下是一个简单的示例代码：
```javascript
for (var i = 0; i < files.length; i++) {
var file = files[i];
var type = file.type.split(/)[0];
if (type !== image) {
alert(请上传图片);
continue;
}
检查文件大小，这里省略...
}
```
接下来使用HTML5的Canvas API进行图片压缩。因为canvas可以将图像数据转化为可操作的数据URL，而FileReader API能帮助读取文件内容，例如通过`readAsDataURL()`方法将其转换为Data URL格式，并在canvas上绘制出来。下面是一个简单的图片压缩函数：
```javascript
function compressImage(file, maxWidth, maxHeight, quality, callback) {
var reader = new FileReader();
reader.onload = function(e) {
var img = new Image();
img.src = e.target.result;
img.onload = function() {
var canvas = document.createElement(canvas);
var ctx = canvas.getContext(2d);
var scale = Math.min(
maxWidth / img.width,
maxHeight / img.height
);
canvas.width = img.width * scale;
canvas.height = img.height * scale;
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
canvas.toBlob(function(blob) {
callback(blob, quality);
}, image/jpeg, quality);
};
};
reader.readAsDataURL(file);
}
```
该函数接受文件、最大宽度和高度值，压缩质量和回调函数作为参数。它先将文件读取为Data URL格式，然后创建一个Image对象加载图片，并根据设定的最大尺寸计算缩放比例，在canvas上绘制出缩小后的图像。使用`canvas.toBlob()`方法可以将Canvas上的内容转换成Blob对象，该对象可以直接用于后续的上传操作。
在完成压缩后通常会将生成的blob对象发送到服务器端进行处理。这一般涉及异步请求技术如fetch或XMLHttpRequest等。这里以fetch为例：
```javascript
compressImage(file, maxWidth, maxHeight, quality, function(blob, quality) {
fetch(upload, {
method: POST,
body: new FormData(),
headers: {
Content-Type: multipart/form-data
},
credentials: same-origin
})
.then(response => response.json())
.then(data => {
document.getElementById(hiddenImgUrl).value = data.imageUrl;
图片上传成功后的处理...
});
});
```
实现JS移动端H5同时选择多张图片并使用canvas压缩后进行上传，主要依赖于HTML5的``、FileReader API和Canvas API以及异步请求技术。通过这些技术可以为用户提供高效友好的图片上传体验，并且有助于减少服务器端存储空间与网络传输的成本。
5星
