当前位置: 首页 > news >正文

使用 JavaScript 实现图片上传

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


http://www.mrgr.cn/news/14570.html

相关文章:

  • vue+datav数据大屏
  • 训练卡和推理卡
  • RabbitMQ 性能优化
  • 202. 快乐数【 力扣(LeetCode) 】
  • windows C++-windows C++/CX简介(六)
  • 秋招力扣Hot100刷题总结——堆
  • Scrapy 分布式爬虫框架 Scrapy-Redis
  • Vue——认识day04_计算属性(案例:实时预览)
  • 从多维度视角探讨“开源AI智能名片O2O商城小程序”的设计与管理
  • 过滤器和拦截器的使用和原理
  • 在线考试系统的开发成本分析
  • 清华计算几何-线段求交与BO算法
  • 数据主权与隐私保护的深入探讨
  • 作业比赛编号 : 5117 - 2023年算法基础第9次 问题 A: 取余运算
  • 当不显示定义默认成员函数,会出现什么状况
  • 大数据技术之Zookeeper客户端 API 操作(4)
  • ComfyUI SDXL Prompt Styler 简介
  • HarmonyOS NEXT应用开发: 常用页面模板
  • cthub-ssrf通关攻略
  • 数据库系统之逻辑设计