使用 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.mzph.cn/web/46687.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Assignments

目录 1、 Assignments.cshtml 1.1、 Content body start 1.2、 <!-- row --> 1.3、 Content body end Assignments.cshtml@{

C++写一个线程池

C写一个线程池 文章目录 C写一个线程池设计思路测试数据的实现任务类的实现线程池类的实现线程池构造函数线程池入口函数队列中取任务添加任务函数线程池终止函数 源码 之前用C语言写了一个线程池&#xff0c;详情请见&#xff1a; C语言写一个线程池 这次换成C了&#xff01;…

获取淘宝商品详情app原数据item_get_app响应参数解析(二):商品标题、销量、sku、价格、视频

API名&#xff1a;item_get_app 功能说明&#xff1a;通过传入商品id获取该商品的详情页原数据。因为是原数据&#xff0c;响应参数较多。 请求示例&#xff08;curl&#xff09;&#xff1a; -- 请求示例 url 默认请求参数已经URL编码处理 curl -i "https://api-服…

Java 在PDF中替换文字(详解)

目录 使用工具 Java在PDF中替换特定文字的所有实例 Java在PDF中替换特定文字的第一个实例 Java在PDF中使用正则表达式替换特定文字 其他替换条件设置 可能出现的问题及解决方案 PDF文档中的信息随时间的推移可能会发生变化&#xff0c;比如产品价格、联系方式等。为了确保…

2024可信数据库发展大会|存算分离架构驱动电信数据平台革新

7 月 16 日 - 17 日&#xff0c;由中国通信标准化协会和中国信息通信研究院主办&#xff0c;大数据技术标准推进委员会承办&#xff0c;InfoQ 联合主办的「2024 可信数据库发展大会」&#xff08;TDBC&#xff09;在北京召开。 酷克数据解决方案架构师吴昊受邀参与“电信行业数…

算法-计数质数

题目&#xff1a; 给定整数 n &#xff0c;返回 所有小于非负整数 n 的质数的数量 。 思路&#xff1a; 使用埃式筛法 当n大于等于2时&#xff0c;如果当前遍历的数 i 是质数&#xff0c;那么从 i*i 开始&#xff0c;直到 n 为止&#xff0c;把 i 的倍数都标记为合数 代码&a…

python数据挖掘---机器学习模型

机器学习模型 数据 算法 算法 Clustering (聚类)&#xff0c;旨在将数据根据相似性进行分组&#xff0c;不需要事先知道每个组的具体定义或标签。简单地说就是把相似的东西分到一组&#xff08;簇&#xff09;&#xff0c;聚类的时候&#xff0c;我们并不关心某一类是什么&am…

为什么提示词写作技能会让生成式AI工程师更上一层楼?

欢迎来到云闪世界。 “为什么我的经理对我的文章吹毛求疵&#xff1f;把措辞从 X 改为 Y 有什么区别&#xff1f;” 当你看到你的经理在你的文档中提出了无数建议时&#xff0c;你可能发现自己有这样的想法&#xff1b;我知道我有过。事实上&#xff0c;我曾经认为写作是数据科…

29、js中this指向

this就是一个使用在作用域内的关键字 1.普通函数调用——》指向window function fn(){console.log(this) //Window } fn() 2.对象调用——》指向对象名 var obj {a: fn,};console.log(obj.a()); 3.定时器函数调用——》指向window setTimeout(function () {console.log(thi…

Flutter 教程实战笔记

Flutter 实战教程笔记&#xff0c;个人觉得不错&#xff0c;特此整理&#xff0c;需要的小伙伴可以看看 01. 初学者须知02. 初识 Flutter03. Flutter 开发环境搭建 Windows 版04. 创建 Flutter 项目05. Flutter 编写一个 HelloWorld 程序06. Flutter Text Widget 文本组件的使…

npm安装依赖包报错,npm ERR! code ENOTFOUND

一、报错现象&#xff1a; npm WARN registry Unexpected warning for https://registry.npmjs.org/: Miscellaneous Warning ETIMEDOUT: request to https://registry.npmjs.org/vue failed, reason: connect ETIMEDOUT 104.16.23.35:443 npm WARN registry Using stale data…

“点点通“餐饮点餐小程序-计算机毕业设计源码11264

"点点通"餐饮点餐小程序 XXX专业XX级XX班&#xff1a;XXX 指导教师&#xff1a;XXX 摘要 随着中国经济的飞速增长&#xff0c;消费者的智能化水平不断提高&#xff0c;许多智能手机和相关的软件正在得到更多的关注和支持。其中&#xff0c;微信的餐饮点餐小程序更…

《Exploring Aligned Complementary Image Pair for Blind Motion Deblurring》

这篇论文的标题《Exploring Aligned Complementary Image Pair for Blind Motion Deblurring》可以翻译为《探索对齐的互补图像对用于盲运动去模糊》。从标题可以推断,论文的焦点在于开发一种算法或技术,利用成对的图像来解决运动模糊问题,特别是在不知道模糊核(即造成模糊…

wifi preamble code, 前导码

WiFi packets 很神奇&#xff0c;自从802.11 协议诞生以来 就对信息传输 产生了无尽的影响&#xff0c; 闲来无事 看看wireless 空口包 发现 前导码 非常奇怪。 为什么前导码有两部分组成&#xff0c; 1. radiotap header 2. 802.11 radio information 并且 radiotap 是有在…

AIGC工具:IPAdapter和ControlNet 指导控制生成工具

ControlNet强调对生成过程的直接控制,如通过线条、边缘、形状等信息;而IPAdapter侧重于风格迁移和内容的间接引导。 IPAdapter 它专注于通过迁移图片风格来生成新的图像内容。IPAdapter的强项在于能够将一张图片的风格迁移到另一张图片上,实现风格融合,甚至可以进行多图风格…

CS110L(Rust)

1.Rust 语法总结 数值类型 有符号整数: i8, i16, i32, i64无符号整数: u8, u16, u32, u64 变量声明 声明变量: let i 0; // 类型推断let n: i32 1; // 显式类型声明 可变变量: let mut n 0; n n 1; 字符串 注意&#xff0c;let s: str "Hello world";…

React@16.x(62)Redux@4.x(11)- 中间件2 - redux-thunk

目录 1&#xff0c;介绍举例 2&#xff0c;原理和实现实现 3&#xff0c;注意点 1&#xff0c;介绍 一般情况下&#xff0c;action 是一个平面对象&#xff0c;并会通过纯函数来创建。 export const createAddUserAction (user) > ({type: ADD_USER,payload: user, });这…

WEB前端07-DOM对象

DOM模型 1.DOM概念 文档对象模型属于BOM的一 部分&#xff0c;用于对BOM中的核心对象document进行操作&#xff0c;它是一种与平台、语言无关的接口&#xff0c;允许程序和脚本动态地访问或更新HTML、XML文档的内容、结构和样式&#xff0c;且提供了一系列的函数和对象来实现…

工作边界感

工作边界 **明确工作边界****尊重他人的工作边界**&#xff1a;**建立有效的沟通机制**&#xff1a;**制定明确的规则和流程**&#xff1a;**保持开放和包容的心态**&#xff1a;**寻求专业支持**&#xff1a; 在程序员的日常工作中&#xff0c;会遇到很多边界问题。如果这些边…

【人工智能大模型】文心一言介绍以及基本使用指令

目录 一、产品背景与技术基础 二、主要功能与特点 基本用法 指令的使用 注意事项 文心一言&#xff08;ERNIE Bot&#xff09;是百度基于其文心大模型技术推出的生成式AI产品。以下是对文心一言的详细介绍&#xff1a; 一、产品背景与技术基础 技术背景&#xff1a;百度…