File, FileReader 和 Ajax 文件上传实例分析(php)

2023年6月10日下午4:23 • JavaScript

首先我们来介绍一下File、FileReader和Ajax文件上传，然后详细讲解与PHP语言相关的开发实例。

什么是File、FileReader和Ajax文件上传

File

File是HTML5中的一个API，用于提供用户选择的文件。我们可以通过input标签中的type="file"来实现文件选择，然后可以通过JavaScript代码获取到选择的文件的相关信息，如文件名、大小、类型等。

FileReader

FileReader是HTML5中用于读取文件的API。我们可以使用FileReader读取选择的文件并对文件内容进行处理。FileReader提供了多种读取文件的方法，如readAsText()就可以将文本文件读入内存并以字符串形式返回。

Ajax文件上传

Ajax文件上传是一种实现无页面刷新上传的方式，我们可以使用XMLHttpRequest对象以异步方式上传文件，这样可以避免页面刷新带来的不良用户体验。同时，Ajax文件上传还可以实现进度条的显示和文件上传的取消等功能。

File, FileReader 和 Ajax文件上传实例分析(php)

下面我们将带领大家实现一个使用File、FileReader和Ajax文件上传的上传图片的例子。首先我们需要创建一个HTML文件，代码例子如下：

<!DOCTYPE html>
<html>
<head>
    <title>Ajax文件上传</title>
    <meta charset="utf-8">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
    <input type="file" id="fileInput">
    <button id="uploadBtn">上传文件</button>
    <div id="progressBar"></div>
    <div id="result"></div>
    <script>
        $(document).ready(function() {
            $('#uploadBtn').on('click', function() {
                var file = $('#fileInput')[0].files[0];
                if (file) {
                    var reader = new FileReader();
                    reader.readAsDataURL(file);
                    reader.onload = function() {
                        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(evt) {
                                    if (evt.lengthComputable) {
                                        var percentComplete = Math.round(evt.loaded / evt.total * 100);
                                        $('#progressBar').html('上传进度：' + percentComplete + '%');
                                    }
                                }, false);
                                xhr.addEventListener('load', function(evt) {
                                    var data = JSON.parse(evt.target.responseText);
                                    $('#result').html('上传成功，服务器返回的数据是：' + data.msg);
                                }, false);
                                return xhr;
                            },
                            error: function(err) {
                                $('#result').html('上传失败，错误信息：' + err);
                            }
                        });
                    };
                }
            });
        });
    </script>
</body>
</html>

在示例中，我们在HTML页面中添加了一个文件选择框和一个上传按钮。当用户点击上传按钮时，我们获取用户选择的文件，并使用FileReader读取文件内容，然后使用Ajax技术将文件上传到服务器端。上传过程中，我们根据上传进度更新进度条，并在上传完成后将服务器端返回的数据显示在页面上。

接下来我们来看一下服务端代码，代码如下：

<?php
header('Content-Type: application/json; charset=UTF-8');
$file = $_FILES['file'];

if ($file['error'] > 0) {
    echo json_encode(array('success' => false, 'msg' => '文件上传失败，错误编号：' . $file['error']));
    exit;
}

if (move_uploaded_file($file['tmp_name'], 'uploads/' . $file['name'])) {
    echo json_encode(array('success' => true, 'msg' => '文件上传成功'));
} else {
    echo json_encode(array('success' => false, 'msg' => '文件上传失败'));
}
?>

我们在PHP代码中首先判断文件上传是否出错，如果出错则返回错误信息；如果上传成功，则将文件移动到服务器上的uploads目录中，并返回上传成功的信息。

总之，通过以上简单的示例，我们可以发现File、FileReader和Ajax文件上传技术的强大之处。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：File, FileReader 和 Ajax 文件上传实例分析(php) - Python技术站