【jquery ajax】实现文件上传提交

作者：System 时间：2024年08月23日分类：所有,ajax 字数：1309

这篇文章距离上次修改已过224天，其中的内容可能已经有所变动。

使用jQuery的$.ajax方法可以实现文件的异步上传。以下是一个简单的实例代码：

HTML部分：

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

JavaScript部分（使用jQuery）：

$(document).ready(function() {
    $('#uploadBtn').click(function() {
        var formData = new FormData($('#uploadForm')[0]);

        $.ajax({
            url: 'your-upload-script.php', // 上传文件的服务器端脚本
            type: 'POST',
            data: formData,
            contentType: false, // 不设置内容类型
            processData: false, // 不处理发送的数据
            success: function(response) {
                console.log('File successfully uploaded: ', response);
            },
            error: function(jqXHR, textStatus, errorThrown) {
                console.log('File upload failed: ', textStatus);
            }
        });
    });
});

服务器端（这里以PHP为例）：

<?php
if ($_FILES['file']['error'] === UPLOAD_ERR_OK) {
    $tmpName = $_FILES['file']['tmp_name'];
    $name = $_FILES['file']['name'];
    move_uploaded_file($tmpName, "/path/to/your/upload/directory/$name");
    echo "文件上传成功";
} else {
    echo "文件上传出错";
}
?>

确保服务器端的上传目录有写入权限，并且服务器配置支持异步文件上传（如正确配置php.ini中的upload_max_filesize和post_max_size）。

【jquery ajax】实现文件上传提交

评论已关闭

推荐阅读