当前位置：首页 > jquery

jquery上传文件

2026-04-07 23:02:56jquery

jQuery 文件上传实现方法

使用 jQuery 实现文件上传通常需要结合 HTML5 的 FormData 对象和 AJAX 技术。以下是几种常见的实现方式：

基础表单提交方式

创建一个包含文件输入的表单，通过 jQuery 监听提交事件：

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

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

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

使用插件实现高级功能

对于更复杂的需求（如多文件上传、进度条显示等），可以使用 jQuery 插件：

jquery上传文件

jQuery File Upload 插件：

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

Dropzone.js 插件：

jquery上传文件

$("#myDropzone").dropzone({
 url: "upload.php",
 paramName: "file",
 maxFilesize: 2, // MB
 acceptedFiles: "image/*",
 addRemoveLinks: true
});

多文件上传实现

通过 HTML5 的 multiple 属性允许选择多个文件：

<input type="file" name="files[]" id="multiFileInput" multiple>

$('#multiUploadForm').submit(function(e) {
    e.preventDefault();
    var formData = new FormData(this);
    var files = $('#multiFileInput')[0].files;

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

    $.ajax({
        url: 'multi_upload.php',
        type: 'POST',
        data: formData,
        processData: false,
        contentType: false,
        success: function(response) {
            console.log('多文件上传成功', response);
        }
    });
});

进度条显示

显示上传进度的实现方法：

$.ajax({
    url: 'upload.php',
    type: 'POST',
    data: formData,
    processData: false,
    contentType: false,
    xhr: function() {
        var xhr = new XMLHttpRequest();
        xhr.upload.addEventListener('progress', function(e) {
            if (e.lengthComputable) {
                var percent = Math.round((e.loaded / e.total) * 100);
                $('#progressBar').width(percent + '%');
                $('#progressText').text(percent + '%');
            }
        }, false);
        return xhr;
    },
    success: function(response) {
        console.log('上传完成', response);
    }
});

服务器端处理示例

PHP 服务器端处理代码示例：

<?php
if ($_FILES['file']['error'] === UPLOAD_ERR_OK) {
    $tempName = $_FILES['file']['tmp_name'];
    $fileName = basename($_FILES['file']['name']);
    $uploadDir = 'uploads/';

    if (move_uploaded_file($tempName, $uploadDir . $fileName)) {
        echo json_encode(['status' => 'success', 'filename' => $fileName]);
    } else {
        echo json_encode(['status' => 'error', 'message' => '文件移动失败']);
    }
} else {
    echo json_encode(['status' => 'error', 'message' => '上传错误']);
}
?>