jQuery+ajax简单实现文件上传的方法

下面是“jQuery+ajax简单实现文件上传的方法”的完整攻略：

一、准备工作

1. 引入jQuery

首先需要引入jQuery库，可以在head标签中通过以下方式引入：

<script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.min.js"></script>

2. 编写HTML代码

在HTML页面中，需要加入一个表单和一个用于显示进度的元素：

<form id="upload-form" enctype="multipart/form-data">
    <input type="file" name="file" id="upload-file">
    <button type="submit">上传文件</button>
</form>
<div id="upload-progress"></div>

二、jQuery+ajax实现文件上传

1. 监听表单提交事件

使用jQuery的submit()方法监听表单提交事件，当用户点击上传按钮时，会触发该事件。

$(function() {
    $('#upload-form').submit(function(event) {
        event.preventDefault(); // 阻止默认表单提交行为
        // 稍后编写 ajax 上传代码
    });
});

2. 编写ajax上传代码

调用jQuery的ajax()方法进行文件上传，配置如下：

$.ajax({
    url: 'upload.php', // 处理上传的服务器端程序
    type: 'POST', // 数据提交方式
    data: formData, // 表单数据
    xhr: function() { // XMLHttpRequest对象
        var xhr = $.ajaxSettings.xhr();
        xhr.upload.onprogress = function(event) { // 上传进度
            // 稍后编写上传进度条更新代码
        };
        return xhr;
    },
    success: function(data) { // 成功上传后回调函数
        alert('上传成功！');
        // 稍后编写上传成功后的代码
    },
    error: function(xhr) { // 上传失败后回调函数
        alert('上传失败！');
    },
    processData: false,
    contentType: false
});

由于是文件上传，所以配置中需将processData和contentType参数均设置为false，同时使用FormData对象作为表单数据，这样才能将文件上传到服务器端。

3. 实现上传进度的更新

监听XMLHttpRequest对象(即xhr对象)的upload事件，该事件会返回一个event对象，其中有一个loaded属性表示已经上传的字节数，而total属性表示总字节数。可通过这两个属性计算上传进度的百分比以及实时更新显示进度条的界面。

xhr.upload.onprogress = function(event) {
    var percent = event.loaded / event.total * 100; // 计算上传进度百分比
    $('#upload-progress').html(percent.toFixed(2) + '%'); // 更新进度条
};

4. 完整示例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>文件上传</title>
    <script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
    <form id="upload-form" enctype="multipart/form-data">
        <input type="file" name="file" id="upload-file">
        <button type="submit">上传文件</button>
    </form>
    <div id="upload-progress"></div>
    <script>
        $(function() {
            $('#upload-form').submit(function(event) {
                event.preventDefault();
                var formData = new FormData(this); // 获取表单数据
                $.ajax({
                    url: 'upload.php',
                    type: 'POST',
                    data: formData,
                    xhr: function() {
                        var xhr = $.ajaxSettings.xhr();
                        xhr.upload.onprogress = function(event) {
                            var percent = event.loaded / event.total * 100;
                            $('#upload-progress').html(percent.toFixed(2) + '%');
                        };
                        return xhr;
                    },
                    success: function(data) {
                        alert('上传成功！');
                        // 稍后编写上传成功后的代码
                    },
                    error: function(xhr) {
                        alert('上传失败！');
                    },
                    processData: false,
                    contentType: false
                });
            });
        });
    </script>
</body>
</html>

三、示例说明

下面提供2个简单的示例说明：

示例1：上传图片

HTML代码：

<form id="upload-form" enctype="multipart/form-data">
    <input type="file" name="file" id="upload-file">
    <button type="submit">上传图片</button>
</form>
<div id="upload-progress"></div>
<img id="show-img" src="">

JavaScript代码：

$(function() {
    $('#upload-form').submit(function(event) {
        event.preventDefault();
        var formData = new FormData(this);
        $.ajax({
            url: 'upload.php',
            type: 'POST',
            data: formData,
            xhr: function() {
                var xhr = $.ajaxSettings.xhr();
                xhr.upload.onprogress = function(event) {
                    var percent = event.loaded / event.total * 100;
                    $('#upload-progress').html(percent.toFixed(2) + '%');
                };
                return xhr;
            },
            success: function(data) {
                alert('上传成功！');
                $('#show-img').attr('src', data); // 显示上传的图片
            },
            error: function(xhr) {
                alert('上传失败！');
            },
            processData: false,
            contentType: false
        });
    });
});

upload.php文件：

<?php
if ($_FILES['file']['error'] > 0) {
    echo '上传失败';
} else {
    $temp = $_FILES['file']['tmp_name'];
    $path = date('YmdHis') . '-' . $_FILES['file']['name'];
    move_uploaded_file($temp, $path);
    echo $path; // 返回图片路径
}
?>

示例2：上传视频并播放