当前位置：首页 > jquery

jquery上传

2026-01-13 17:03:23jquery

jQuery 文件上传的实现方法

jQuery 可以通过多种方式实现文件上传功能，以下介绍几种常见的方法：

使用原生表单和 AJAX

通过 HTML 表单结合 jQuery 的 AJAX 功能实现文件上传：

<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 href="https://cdn.jsdelivr.net/npm/blueimp-file-upload@10.31.0/css/jquery.fileupload.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/blueimp-file-upload@10.31.0/js/vendor/jquery.ui.widget.js"></script>
<script src="https://cdn.jsdelivr.net/npm/blueimp-file-upload@10.31.0/js/jquery.iframe-transport.js"></script>
<script src="https://cdn.jsdelivr.net/npm/blueimp-file-upload@10.31.0/js/jquery.fileupload.js"></script>

HTML 部分：

<input id="fileupload" type="file" name="files[]" multiple>
<div id="progress">
 <div class="bar" style="width: 0%;"></div>
</div>

JavaScript 部分：

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

使用 Dropzone.js

Dropzone.js 是另一个流行的文件上传库：

引入 Dropzone：

<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>

HTML 部分：

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

JavaScript 配置：

Dropzone.options.myDropzone = {
 paramName: "file",
 maxFilesize: 5, // MB
 acceptedFiles: "image/*,.pdf,.doc,.docx",
 addRemoveLinks: true,
 dictDefaultMessage: "拖放文件到这里或点击上传",
 dictRemoveFile: "移除文件",
 init: function() {
     this.on("success", function(file, response) {
         console.log("文件上传成功", response);
     });
 }
};

服务器端处理示例（PHP）

<?php
$targetDir = "uploads/";
$targetFile = $targetDir . basename($_FILES["file"]["name"]);
$uploadOk = 1;
$imageFileType = strtolower(pathinfo($targetFile, PATHINFO_EXTENSION));

// 检查文件是否已存在
if (file_exists($targetFile)) {
    echo "抱歉，文件已存在。";
    $uploadOk = 0;
}

// 检查文件大小
if ($_FILES["file"]["size"] > 5000000) {
    echo "抱歉，文件太大。";
    $uploadOk = 0;
}

// 允许特定文件格式
if($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg"
&& $imageFileType != "gif" && $imageFileType != "pdf" && $imageFileType != "doc"
&& $imageFileType != "docx") {
    echo "抱歉，只允许 JPG, JPEG, PNG, GIF, PDF, DOC, DOCX 文件。";
    $uploadOk = 0;
}

// 检查 $uploadOk 是否为 0
if ($uploadOk == 0) {
    echo "抱歉，文件未上传。";
} else {
    if (move_uploaded_file($_FILES["file"]["tmp_name"], $targetFile)) {
        echo "文件 ". htmlspecialchars(basename($_FILES["file"]["name"])). " 上传成功。";
    } else {
        echo "抱歉，上传文件时出错。";
    }
}
?>