Simple Ajax Uploader: 增强你的文件上传体验

以下是一个简单的Ajax文件上传器的示例代码，它使用了jQuery库和PHP后端进行文件上传。

HTML 部分:

<form id="upload-form" action="upload.php" method="post" enctype="multipart/form-data">
    <input type="file" id="file-input" name="file"/>
    <button type="submit" id="upload-button">上传</button>
</form>
<div id="status"></div>
 
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="ajaxupload.js"></script>

JavaScript (ajaxupload.js) 部分:

$(document).ready(function() {
    $('#upload-form').submit(function(e) {
        e.preventDefault();
        var formData = new FormData($(this)[0]);
 
        $.ajax({
            url: $(this).attr('action'),
            type: 'POST',
            data: formData,
            contentType: false,
            processData: false,
            success: function(data) {
                $('#status').html('文件上传成功: ' + data);
            },
            error: function() {
                $('#status').html('文件上传失败');
            }
        });
    });
});

PHP 部分 (upload.php):

<?php
if ($_FILES['file']['error'] === UPLOAD_ERR_OK) {
    $tmp_name = $_FILES['file']['tmp_name'];
    $name = $_FILES['file']['name'];
    move_uploaded_file($tmp_name, "uploads/$name");
    echo "文件已保存至 uploads/$name";
} else {
    echo "上传出错";
}
?>

这个示例代码展示了如何使用jQuery和Ajax来异步上传文件，而不需要刷新页面。用户选择文件后点击上传按钮，文件会被异步发送到服务器，服务器端接收文件后保存，之后通过Ajax返回相应的成功或错误信息给客户端。