当前位置：首页 > jquery

jquery文件上传

2026-01-14 16:30:33jquery

jQuery 文件上传实现方法

基础文件上传实现

使用 jQuery 结合 HTML5 的 FormData 对象可以实现异步文件上传。创建一个包含文件输入的表单：

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

jQuery 代码处理表单提交：

$('#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);
        }
    });
});

多文件上传实现

允许选择多个文件并一次性上传：

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

修改 jQuery 代码处理多文件：

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

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

进度条显示

使用 xhr 对象显示上传进度：

$.ajax({
    xhr: function() {
        var xhr = new window.XMLHttpRequest();
        xhr.upload.addEventListener('progress', function(e) {
            if (e.lengthComputable) {
                var percent = Math.round((e.loaded / e.total) * 100);
                $('#progressBar').css('width', percent + '%');
            }
        }, false);
        return xhr;
    }
});

文件验证

在上传前验证文件类型和大小：

var file = $('#fileInput')[0].files[0];
var validTypes = ['image/jpeg', 'image/png'];
var maxSize = 2 * 1024 * 1024; // 2MB

if ($.inArray(file.type, validTypes) < 0) {
    alert('不支持的文件类型');
    return false;
}

if (file.size > maxSize) {
    alert('文件大小超过限制');
    return false;
}

使用 jQuery 文件上传插件

对于更复杂的需求，可以使用专门的 jQuery 文件上传插件如 jQuery File Upload：

引入插件文件：

<script src="js/vendor/jquery.ui.widget.js"></script>
<script src="js/jquery.iframe-transport.js"></script>
<script src="js/jquery.fileupload.js"></script>

基本配置：

jquery文件上传

$('#fileInput').fileupload({
 url: 'upload.php',
 dataType: 'json',
 done: function(e, data) {
     $.each(data.result.files, function(index, file) {
         $('<p/>').text(file.name + ' 上传成功').appendTo('#files');
     });
 }
});

服务器端处理示例（PHP）

$targetDir = "uploads/";
$targetFile = $targetDir . basename($_FILES["file"]["name"]);

if (move_uploaded_file($_FILES["file"]["tmp_name"], $targetFile)) {
    echo json_encode(['status' => 'success', 'file' => $targetFile]);
} else {
    echo json_encode(['status' => 'error']);
}