JS 上传图片|极客笔记

JS 上传图片

在网页开发中，经常会遇到需要上传图片的需求，而使用JavaScript可以实现在网页上上传图片的功能。本文将详细介绍如何使用JS上传图片，包括基本的HTML结构、JavaScript代码以及上传图片的过程。

基本HTML结构

首先，我们需要创建一个HTML文件，用于上传图片。以下是一个简单的HTML结构：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Upload Image</title>
</head>
<body>
    <input type="file" id="fileInput">
    <button onclick="uploadImage()">Upload</button>
    <img id="preview" src="" alt="Preview Image">
</body>
</html>

在上面的HTML结构中，我们创建了一个输入框用于选择文件、一个按钮用于上传文件以及一个图片标签用于预览选择的图片。

JavaScript 代码

接下来，我们通过JavaScript来实现上传图片的功能。首先我们需要获取输入框和图片标签：

const fileInput = document.getElementById('fileInput');
const preview = document.getElementById('preview');

然后，我们需要编写上传图片的函数uploadImage()：

function uploadImage() {
    const file = fileInput.files[0];

    if (file) {
        const reader = new FileReader();

        reader.onload = function(e) {
            preview.src = e.target.result;
        }

        reader.readAsDataURL(file);
    } else {
        alert('Please select a file!');
    }
}

在上面的代码中，我们首先获取选择的文件，然后使用FileReader读取文件内容，并将其显示在预览图片上。如果没有选择文件，则会弹出提示框。