使用 JavaScript 实现图片上传

刘志辉

于 2024-07-18 20:54:54 发布

阅读量110

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_58462329/article/details/140532833

版权

首先，我们需要创建一个包含用于显示图片预览和文件输入的 HTML 页面。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Image Upload</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Image Upload</h1>
   <input type="file" id="file-input" />
    <img id="image-preview" src="" alt="Image Preview" style="display: none;" />
   <button id="upload-btn">Upload Image</button>

   <script src="scripts.js"></script>
</body>
</html>

添加 CSS 样式

接下来，我们为页面添加一些基本的样式。创建一个名为 styles.css 的文件，并添加以下内容：

body {
    font-family: Arial, sans-serif;
    text-align: center;
}

img {
    max-width: 100%;
}

button {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}

编写 JavaScript 代码

现在我们已经准备好编写 JavaScript 代码来实现图片上传功能。首先创建一个名为 scripts.js 的文件，然后添加以下代码：

document.getElementById('file-input').addEventListener('change', function (event) {
    const file = event.target.files[0];
    if (file && file.type.match('image.*')) {
        const reader = new FileReader();
        reader.onload = function (e) {
            document.getElementById('image-preview').style.display = 'block';
            document.getElementById('image-preview').src = e.target.result;
        };
        reader.readAsDataURL(file);
    } else {
        alert('Please select a valid image file.');
    }
});

document.getElementById('upload-btn').addEventListener('click', function () {
    const fileInput = document.getElementById('file-input');
    const file = fileInput.files[0];
    const formData = new FormData();
    formData.append('image', file);

    fetch('https://yourserver.com/upload', {
        method: 'POST',
        body: formData,
    })
    .then(response => response.json())
    .then(data => {
        console.log('Success:', data);
        alert('Image uploaded successfully.');
    })
    .catch((error) => {
        console.error('Error:', error);
        alert('Error uploading the image.');
    });
});

请注意，你需要将把网址替换为你自己的服务器端 API，用于处理图片上传。

现在，当用户选择一张图片时，它将显示在页面上作为预览。点击 "Upload Image" 按钮后，图片将被发送到服务器。