js实现上传图片

使用HTML5的File API实现图片上传

HTML5的File API允许通过JavaScript访问用户选择的文件。需要创建一个文件输入元素，并监听其change事件。

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

document.getElementById('fileInput').addEventListener('change', function(event) {
    const file = event.target.files[0];
    if (file) {
        const reader = new FileReader();
        reader.onload = function(e) {
            const img = document.createElement('img');
            img.src = e.target.result;
            document.body.appendChild(img);
        };
        reader.readAsDataURL(file);
    }
});

通过FormData实现AJAX上传

使用FormData对象可以方便地构建表单数据，并通过XMLHttpRequest或fetch API发送到服务器。

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

    fetch('/upload', {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(data => console.log('Upload success:', data))
    .catch(error => console.error('Error:', error));
}

预览图片并限制文件类型

在提交前预览图片并验证文件类型，确保只接受特定格式的图片。

function handleFileSelect(event) {
    const file = event.target.files[0];
    if (!file.type.match('image.*')) {
        alert('请选择图片文件');
        return;
    }

    const preview = document.getElementById('preview');
    const reader = new FileReader();

    reader.onload = function(e) {
        preview.src = e.target.result;
        preview.style.display = 'block';
    };
    reader.readAsDataURL(file);
}

多文件上传处理

支持一次选择多个文件并上传，需要遍历FileList对象。

function handleMultipleFiles(event) {
    const files = event.target.files;
    const formData = new FormData();

    for (let i = 0; i < files.length; i++) {
        formData.append('images[]', files[i]);
    }

    fetch('/multi-upload', {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(data => console.log('All files uploaded:', data));
}

使用第三方库简化上传

使用如Dropzone.js等第三方库可以快速实现拖放上传功能。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.3/dropzone.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.3/dropzone.min.js"></script>

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

Dropzone.options.myDropzone = {
    paramName: "file",
    maxFilesize: 2, // MB
    acceptedFiles: "image/*",
    addRemoveLinks: true
};

进度条显示上传进度

通过XMLHttpRequest的progress事件可以跟踪上传进度并更新UI。

function uploadWithProgress(file) {
    const xhr = new XMLHttpRequest();
    xhr.open('POST', '/upload', true);

    xhr.upload.onprogress = function(e) {
        if (e.lengthComputable) {
            const percentComplete = (e.loaded / e.total) * 100;
            document.getElementById('progress').value = percentComplete;
        }
    };

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

压缩图片后上传

使用canvas API可以在客户端压缩图片后再上传，减少传输数据量。

function compressAndUpload(file) {
    const reader = new FileReader();
    reader.onload = function(event) {
        const img = new Image();
        img.onload = function() {
            const canvas = document.createElement('canvas');
            const ctx = canvas.getContext('2d');
            canvas.width = img.width * 0.5;
            canvas.height = img.height * 0.5;
            ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

            canvas.toBlob(function(blob) {
                const compressedFile = new File([blob], file.name, {
                    type: 'image/jpeg',
                    lastModified: Date.now()
                });
                uploadImage(compressedFile);
            }, 'image/jpeg', 0.7);
        };
        img.src = event.target.result;
    };
    reader.readAsDataURL(file);
}