检查图片上传

创作时间:

作者:

@小白创作中心

检查图片上传

引用

来源

https://docs.pingcode.com/baike/3635250

要判断图片是否已经上传，可以通过以下几种方法：检查文件输入框的值、监听文件输入框的变更事件、使用JavaScript File API访问文件信息。本文将详细探讨这些方法并提供代码示例。

一、检查文件输入框的值

在HTML中，文件输入框通常使用<input type="file">标签。通过JavaScript，可以轻松地获取这个输入框的值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>检查图片上传</title>
</head>
<body>
    <input type="file" id="fileInput">
    <button onclick="checkFile()">检查文件</button>
    <script>
        function checkFile() {
            var fileInput = document.getElementById('fileInput');
            if (fileInput.value) {
                alert('已选择文件: ' + fileInput.value);
            } else {
                alert('未选择文件');
            }
        }
    </script>
</body>
</html>

在上述代码中，点击按钮会调用checkFile函数。该函数检查文件输入框的值，并根据是否有值来判断是否选择了文件。

二、监听文件输入框的变更事件

通过监听文件输入框的change事件，可以在用户选择文件的瞬间进行处理。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>监听文件上传</title>
</head>
<body>
    <input type="file" id="fileInput">
    <script>
        document.getElementById('fileInput').addEventListener('change', function() {
            if (this.files && this.files.length > 0) {
                alert('已选择文件: ' + this.files[0].name);
            } else {
                alert('未选择文件');
            }
        });
    </script>
</body>
</html>

此代码示例监听了fileInput的change事件，并在用户选择文件时弹出文件名。

三、使用JavaScript File API访问文件信息

JavaScript File API提供了更强大的功能，可以访问更多的文件信息，如文件大小、文件类型等。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用File API</title>
</head>
<body>
    <input type="file" id="fileInput">
    <script>
        document.getElementById('fileInput').addEventListener('change', function() {
            if (this.files && this.files.length > 0) {
                var file = this.files[0];
                console.log('文件名: ' + file.name);
                console.log('文件类型: ' + file.type);
                console.log('文件大小: ' + file.size + '字节');
            } else {
                console.log('未选择文件');
            }
        });
    </script>
</body>
</html>

在这个示例中，使用File API可以获取更多的文件详细信息，并通过控制台输出。

四、结合实际应用场景

在实际的项目中，判断图片是否上传通常是一个更复杂的任务，可能还需要结合表单验证、上传进度显示等功能。以下是一个更为复杂的示例，结合了上述方法，并展示了上传进度。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片上传进度</title>
</head>
<body>
    <input type="file" id="fileInput">
    <progress id="progressBar" value="0" max="100" style="display:none;"></progress>
    <script>
        document.getElementById('fileInput').addEventListener('change', function() {
            if (this.files && this.files.length > 0) {
                var file = this.files[0];
                console.log('文件名: ' + file.name);
                console.log('文件类型: ' + file.type);
                console.log('文件大小: ' + file.size + '字节');
                uploadFile(file);
            } else {
                console.log('未选择文件');
            }
        });
        function uploadFile(file) {
            var xhr = new XMLHttpRequest();
            var progressBar = document.getElementById('progressBar');
            progressBar.style.display = 'block';
            xhr.upload.addEventListener('progress', function(e) {
                if (e.lengthComputable) {
                    var percentComplete = (e.loaded / e.total) * 100;
                    progressBar.value = percentComplete;
                }
            });
            xhr.upload.addEventListener('load', function() {
                console.log('上传完成');
                progressBar.style.display = 'none';
            });
            xhr.open('POST', '/upload', true);
            var formData = new FormData();
            formData.append('file', file);
            xhr.send(formData);
        }
    </script>
</body>
</html>

在这个示例中，我们使用了XMLHttpRequest对象来上传文件，并显示了上传进度条。通过监听progress事件，可以实时更新进度条的值，从而为用户提供更好的体验。