JS移动端/H5同时选择多张图片上传并使用canvas压缩图片

在JS移动端和H5开发中，常常需要处理用户选择的图片上传，特别是在移动设备上，这一需求更加普遍。本文将详细介绍如何实现同时选择多张图片并利用canvas进行压缩上传的流程。 HTML5提供了`<input type="file">`元素，通过添加`multiple`属性，可以让用户在文件选择对话框中选取多张图片。例如： ```html <input type="file" accept="image/*" name="upload" id="upload" multiple> <input type="hidden" id="hiddenImgUrl" /> ``` 这里的`accept="image/*"`限制了用户只能选择图片文件，而`multiple`属性则允许选择多个文件。`<input type="hidden">`隐藏域用于存储上传后的图片地址。 接下来，我们需要监听`<input type="file">`的`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对象可以直接用于上传到服务器。 在压缩图片后，通常会将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的`<input type="file">`、FileReader API、Canvas API和异步上传技术。通过这些技术，我们可以为用户提供高效、友好的图片上传体验，同时降低服务器存储和传输的成本。