当前位置：首页 > jquery

jquery图片上传

2026-04-07 23:36:41jquery

jQuery图片上传实现方法

使用jQuery实现图片上传功能通常需要结合HTML表单、AJAX请求和后端处理。以下是几种常见的实现方式：

基础表单提交方式

创建HTML表单元素，通过jQuery监听提交事件：

<form id="uploadForm" enctype="multipart/form-data">
    <input type="file" id="fileInput" name="image" accept="image/*">
    <button type="submit">上传</button>
</form>

$('#uploadForm').on('submit', function(e) {
    e.preventDefault();
    var formData = new FormData(this);

    $.ajax({
        url: '/upload',
        type: 'POST',
        data: formData,
        processData: false,
        contentType: false,
        success: function(response) {
            console.log('上传成功', response);
        },
        error: function(xhr, status, error) {
            console.error('上传失败', error);
        }
    });
});

使用插件简化操作

对于更复杂的需求，可以使用jQuery插件如jQuery-File-Upload：

$('#fileInput').fileupload({
    url: '/upload',
    dataType: 'json',
    done: function(e, data) {
        $.each(data.result.files, function(index, file) {
            $('<p/>').text(file.name + ' 上传成功').appendTo('#files');
        });
    },
    progressall: function(e, data) {
        var progress = parseInt(data.loaded / data.total * 100, 10);
        $('#progress .bar').css('width', progress + '%');
    }
});

图片预览功能

在上传前显示图片预览：

function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function(e) {
            $('#preview').attr('src', e.target.result);
        }
        reader.readAsDataURL(input.files[0]);
    }
}

$('#fileInput').change(function() {
    readURL(this);
});

多文件上传处理

支持多文件选择和上传：

jquery图片上传

<input type="file" id="multiFileInput" multiple>

$('#multiFileInput').change(function() {
    var files = this.files;
    var formData = new FormData();

    $.each(files, function(i, file) {
        formData.append('files[]', file);
    });

    $.ajax({
        url: '/multi-upload',
        type: 'POST',
        data: formData,
        processData: false,
        contentType: false,
        success: function(response) {
            console.log('所有文件上传完成', response);
        }
    });
});