jquery 文件上传

jQuery 文件上传实现方法

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

使用原生 HTML5 和 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 是一个功能强大的文件上传插件：

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

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

使用 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,
        cache: false,
        contentType: false,
        processData: false,
        success: function(response) {
            console.log('上传成功', response);
        }
    });
});

服务器端处理示例（PHP）

if ($_FILES['file']['error'] === UPLOAD_ERR_OK) {
    $tempName = $_FILES['file']['tmp_name'];
    $fileName = $_FILES['file']['name'];
    move_uploaded_file($tempName, 'uploads/' . $fileName);
    echo json_encode(['status' => 'success', 'filename' => $fileName]);
} else {
    echo json_encode(['status' => 'error', 'message' => '上传失败']);
}

注意事项

• 确保表单包含 enctype="multipart/form-data" 属性
• 设置 processData: false 和 contentType: false 对于 AJAX 文件上传至关重要
• 对于大文件上传，可能需要调整服务器配置（如 upload_max_filesize 和 post_max_size）
• 考虑添加文件类型和大小验证

这些方法提供了灵活的文件上传解决方案，可以根据具体需求选择适合的方式。