当前位置：首页 > jquery

jquery文件上传

2026-03-02 13:57:32jquery

jQuery 文件上传实现方法

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

使用 FormData 和 AJAX

创建 HTML 表单：

<input type="file" id="fileInput">
<button id="uploadBtn">上传文件</button>
<div id="progress"></div>

jQuery 代码：

$('#uploadBtn').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,
        xhr: function() {
            var xhr = new XMLHttpRequest();
            xhr.upload.addEventListener('progress', function(e) {
                if (e.lengthComputable) {
                    var percent = Math.round((e.loaded / e.total) * 100);
                    $('#progress').html('上传进度: ' + percent + '%');
                }
            }, false);
            return xhr;
        },
        success: function(response) {
            alert('上传成功');
        },
        error: function() {
            alert('上传失败');
        }
    });
});

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

HTML 结构：

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

初始化插件：

jquery文件上传

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

服务器端处理示例 (PHP)

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

if (move_uploaded_file($_FILES["file"]["tmp_name"], $targetFile)) {
    echo json_encode(['status' => 'success', 'filename' => $_FILES["file"]["name"]]);
} else {
    echo json_encode(['status' => 'error', 'message' => '文件上传失败']);
}