当前位置：首页 > JavaScript

js实现图片上传

2026-04-03 18:05:14JavaScript

使用input元素实现图片上传

创建一个HTML文件输入元素，允许用户选择图片文件

<input type="file" id="imageUpload" accept="image/*">

监听文件选择变化事件，获取选中的图片文件

document.getElementById('imageUpload').addEventListener('change', function(event) {
    const file = event.target.files[0];
    if (!file) return;

    // 验证文件类型
    if (!file.type.match('image.*')) {
        alert('请选择图片文件');
        return;
    }
});

预览上传的图片

使用FileReader API读取图片文件并显示预览

const reader = new FileReader();
reader.onload = function(e) {
    const imgPreview = document.createElement('img');
    imgPreview.src = e.target.result;
    document.body.appendChild(imgPreview);
};
reader.readAsDataURL(file);

使用FormData上传图片到服务器

创建FormData对象并附加图片文件

const formData = new FormData();
formData.append('image', file);

使用fetch API发送图片到服务器

fetch('/upload', {
    method: 'POST',
    body: formData
})
.then(response => response.json())
.then(data => console.log('上传成功', data))
.catch(error => console.error('上传失败', error));

使用Canvas压缩图片

创建Canvas元素进行图片压缩

const img = new Image();
img.onload = function() {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // 设置压缩比例
    const MAX_WIDTH = 800;
    const MAX_HEIGHT = 800;
    let width = img.width;
    let height = img.height;

    if (width > height) {
        if (width > MAX_WIDTH) {
            height *= MAX_WIDTH / width;
            width = MAX_WIDTH;
        }
    } else {
        if (height > MAX_HEIGHT) {
            width *= MAX_HEIGHT / height;
            height = MAX_HEIGHT;
        }
    }

    canvas.width = width;
    canvas.height = height;
    ctx.drawImage(img, 0, 0, width, height);

    // 获取压缩后的图片数据
    canvas.toBlob(function(blob) {
        // 上传压缩后的图片
        const compressedFile = new File([blob], file.name, {
            type: 'image/jpeg',
            lastModified: Date.now()
        });

        const formData = new FormData();
        formData.append('image', compressedFile);
        // 继续上传流程...
    }, 'image/jpeg', 0.7);
};
img.src = URL.createObjectURL(file);

实现拖放上传功能

添加拖放区域HTML

<div id="dropArea" style="border: 2px dashed #ccc; padding: 20px;">
    拖放图片到这里上传
</div>

实现拖放事件处理

const dropArea = document.getElementById('dropArea');

// 阻止默认拖放行为
['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
    dropArea.addEventListener(eventName, preventDefaults, false);
});

function preventDefaults(e) {
    e.preventDefault();
    e.stopPropagation();
}

// 高亮显示拖放区域
['dragenter', 'dragover'].forEach(eventName => {
    dropArea.addEventListener(eventName, highlight, false);
});

['dragleave', 'drop'].forEach(eventName => {
    dropArea.addEventListener(eventName, unhighlight, false);
});

function highlight() {
    dropArea.style.borderColor = '#666';
}

function unhighlight() {
    dropArea.style.borderColor = '#ccc';
}

// 处理拖放文件
dropArea.addEventListener('drop', handleDrop, false);

function handleDrop(e) {
    const dt = e.dataTransfer;
    const files = dt.files;

    if (files.length) {
        handleFiles(files);
    }
}

function handleFiles(files) {
    const file = files[0];
    // 处理文件上传...
}

使用第三方库简化上传过程

使用Dropzone.js实现上传功能

<link rel="stylesheet" href="https://unpkg.com/dropzone@5/dist/min/dropzone.min.css">
<script src="https://unpkg.com/dropzone@5/dist/min/dropzone.min.js"></script>

<form action="/upload" class="dropzone" id="myDropzone"></form>

配置Dropzone选项

js实现图片上传

Dropzone.options.myDropzone = {
    paramName: "image",
    maxFilesize: 2, // MB
    acceptedFiles: "image/*",
    addRemoveLinks: true,
    dictDefaultMessage: "拖放图片到这里上传",
    dictFileTooBig: "文件太大 ({{filesize}}MB). 最大支持: {{maxFilesize}}MB.",
    dictInvalidFileType: "不支持的文件类型",
    dictResponseError: "服务器返回 {{statusCode}} 错误",
    dictCancelUpload: "取消上传",
    dictUploadCanceled: "上传已取消",
    dictRemoveFile: "移除文件",
    dictMaxFilesExceeded: "只能上传一个文件"
};