h5移动端实现图片上传
移动端H5图片上传实现方法
使用input元素
在H5页面中添加一个input元素，设置type为file，并添加accept属性限制文件类型为图片：
<input type="file" accept="image/*" id="uploadInput">通过JavaScript监听change事件获取用户选择的图片文件：
document.getElementById('uploadInput').addEventListener('change', function(e) {
const file = e.target.files[0];
if (file) {
// 处理文件上传
}
});图片预览功能
使用FileReader API实现图片预览：
const reader = new FileReader();
reader.onload = function(e) {
const previewImg = document.createElement('img');
previewImg.src = e.target.result;
document.body.appendChild(previewImg);
};
reader.readAsDataURL(file);压缩图片
使用Canvas API进行图片压缩：
function compressImage(file, quality = 0.8) {
return new Promise((resolve) => {
const img = new Image();
img.onload = () => {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0, img.width, img.height);
canvas.toBlob((blob) => resolve(blob), 'image/jpeg', quality);
};
img.src = URL.createObjectURL(file);
});
}上传到服务器
使用FormData和fetch API上传图片：
const formData = new FormData();
formData.append('image', file);
fetch('https://your-server.com/upload', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => console.log('Upload success:', data))
.catch(error => console.error('Upload error:', error));移动端适配注意事项
-
添加
capture属性可以调用移动设备相机：<input type="file" accept="image/*" capture="camera"> -
针对不同设备的兼容性问题，建议使用成熟的第三方库如：
react-dropzone（React项目）vue-upload-component（Vue项目）plupload（通用解决方案）
-
大文件上传需要考虑分片上传或断点续传功能
安全性考虑
- 服务器端需要验证文件类型和大小
- 对上传的文件进行病毒扫描
- 限制上传文件的最大尺寸
- 实现CSRF防护机制
性能优化
- 使用Web Workers处理大文件压缩
- 显示上传进度条提升用户体验
- 实现多图片批量上传功能
- 采用懒加载技术处理大量图片预览
