图片上传 js怎么写

图片上传 JS 实现方法：

使用FormData对象、XMLHttpRequest对象、监听文件输入变化、处理响应数据。其中，FormData对象的使用是图片上传功能的关键。FormData对象允许我们轻松地构建包含文件数据的表单数据，并通过AJAX发送到服务器。下面，我们将详细讲解如何使用这些技术实现图片上传功能。

一、准备工作

在开始编写JavaScript代码之前，我们需要准备一个HTML文件上传表单。以下是一个简单的HTML文件上传表单示例：

<!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>
    <form id="uploadForm">
        <input type="file" id="fileInput" name="file" accept="image/*">
        <button type="button" id="uploadButton">上传图片</button>
    </form>
    <div id="uploadStatus"></div>
    <script src="upload.js"></script>
</body>
</html>

二、编写JavaScript代码

在upload.js文件中，我们将编写处理图片上传的JavaScript代码。

1、监听文件输入变化

首先，我们需要监听文件输入的变化，以便在用户选择文件时获取文件对象。

document.getElementById('fileInput').addEventListener('change', function(event) {
    const file = event.target.files[0];
    if (file) {
        console.log('Selected file:', file.name);
    }
});

2、构建FormData对象

接下来，我们需要在用户点击上传按钮时构建一个FormData对象，并将文件数据添加到其中。

document.getElementById('uploadButton').addEventListener('click', function() {
    const fileInput = document.getElementById('fileInput');
    const file = fileInput.files[0];
    if (file) {
        const formData = new FormData();
        formData.append('file', file);
        // 调用上传函数
        uploadFile(formData);
    } else {
        alert('请选择一个文件');
    }
});

3、使用XMLHttpRequest对象上传文件

我们将使用XMLHttpRequest对象来发送AJAX请求，并处理服务器的响应。

function uploadFile(formData) {
    const xhr = new XMLHttpRequest();
    xhr.open('POST', '/upload', true);
    // 监听上传进度
    xhr.upload.addEventListener('progress', function(event) {
        if (event.lengthComputable) {
            const percentComplete = (event.loaded / event.total) * 100;
            document.getElementById('uploadStatus').innerText = '上传进度: ' + percentComplete.toFixed(2) + '%';
        }
    });
    // 监听上传完成
    xhr.addEventListener('load', function() {
        if (xhr.status === 200) {
            document.getElementById('uploadStatus').innerText = '上传成功';
        } else {
            document.getElementById('uploadStatus').innerText = '上传失败';
        }
    });
    // 监听上传错误
    xhr.addEventListener('error', function() {
        document.getElementById('uploadStatus').innerText = '上传错误';
    });
    // 发送请求
    xhr.send(formData);
}

三、处理响应数据

在实际应用中，服务器通常会返回一些关于上传状态的响应数据。我们可以在XMLHttpRequest对象的load事件监听器中处理这些响应数据。

xhr.addEventListener('load', function() {
    if (xhr.status === 200) {
        const response = JSON.parse(xhr.responseText);
        document.getElementById('uploadStatus').innerText = '上传成功: ' + response.message;
    } else {
        document.getElementById('uploadStatus').innerText = '上传失败';
    }
});

四、上传进度显示

为了提供更好的用户体验，我们可以显示上传进度。这可以通过监听XMLHttpRequest对象的progress事件来实现。

xhr.upload.addEventListener('progress', function(event) {
    if (event.lengthComputable) {
        const percentComplete = (event.loaded / event.total) * 100;
        document.getElementById('uploadStatus').innerText = '上传进度: ' + percentComplete.toFixed(2) + '%';
    }
});

五、使用Fetch API进行图片上传

除了XMLHttpRequest对象，我们还可以使用现代的Fetch API来进行图片上传。Fetch API提供了更简洁的语法和更强大的功能。

document.getElementById('uploadButton').addEventListener('click', function() {
    const fileInput = document.getElementById('fileInput');
    const file = fileInput.files[0];
    if (file) {
        const formData = new FormData();
        formData.append('file', file);
        // 使用Fetch API上传文件
        fetch('/upload', {
            method: 'POST',
            body: formData
        })
        .then(response => response.json())
        .then(data => {
            document.getElementById('uploadStatus').innerText = '上传成功: ' + data.message;
        })
        .catch(error => {
            document.getElementById('uploadStatus').innerText = '上传失败';
        });
    } else {
        alert('请选择一个文件');
    }
});

六、总结

通过上述步骤，我们已经详细介绍了如何使用JavaScript实现图片上传功能。FormData对象的使用使得构建包含文件数据的表单数据变得非常简单，而XMLHttpRequest对象和Fetch API则为我们提供了强大的AJAX功能，能够轻松地将文件数据上传到服务器。

在实际应用中，我们还可以根据需要添加更多的功能，比如文件类型校验、文件大小限制、错误处理等，以提高用户体验和系统的鲁棒性。希望这篇文章对你有所帮助，能够帮助你更好地实现图片上传功能。