首先，我们需要创建一个包含用于显示图片预览和文件输入的 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" 按钮后，图片将被发送到服务器。
