当前位置：首页 > jquery

jquery文件上传

2026-04-07 23:01:22jquery

jQuery 文件上传的实现方法

使用 jQuery 实现文件上传可以通过多种方式，以下是常见的几种方法：

使用原生 HTML5 文件上传结合 jQuery 处理

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

<input type="file" id="fileInput">
<button id="uploadButton">上传</button>

$('#uploadButton').click(function() {
    var file = $('#fileInput')[0].files[0];
    var formData = new FormData();
    formData.append('file', file);

    $.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 File Upload 插件

jQuery File Upload 是一个功能强大的文件上传插件：

引入必要的文件：

<link rel="stylesheet" href="jquery.fileupload.css">
<script src="jquery.ui.widget.js"></script>
<script src="jquery.iframe-transport.js"></script>
<script src="jquery.fileupload.js"></script>

初始化插件：

$('#fileupload').fileupload({
 url: 'upload.php',
 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 + '%');
 }
});

处理多文件上传

修改 FormData 对象以支持多文件上传：

jquery文件上传

$('#uploadButton').click(function() {
    var files = $('#fileInput')[0].files;
    var formData = new FormData();

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

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

服务器端处理示例（PHP）

if ($_FILES['file']['error'] === UPLOAD_ERR_OK) {
    $tempName = $_FILES['file']['tmp_name'];
    $fileName = basename($_FILES['file']['name']);
    $uploadPath = 'uploads/' . $fileName;

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