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

拖拽上传（预览图片）

news 文章来源：https://blog.csdn.net/qq_34708564/article/details/140522386 2024/11/15 18:34:58

需求

点击+上传图片，或直接拖拽图片到红色方框里面也可上传图片，上传后预览图片

效果

在这里插入图片描述

实现

<!DOCTYPE html>
<html lang="zh-cn"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>图片文件拖拽上传</title><style>* {margin: 0;padding: 0;}img {display: block;width: 200px;height: auto;}.show-img {display: flex;justify-content: center;align-items: center;width: 800px;height: 320px;margin: 100px auto;border: 1px solid red;}.container {display: flex;}.upload {position: relative;width: 100px;height: 100px;border: 2px dashed #ccc;}.upload::before,.upload::after {content: '';position: absolute;left: 0;top: 0;bottom: 0;right: 0;margin: auto;background-color: black;}.upload::before {width: 20px;height: 4px;}.upload::after {width: 4px;height: 20px;}/* 触发file类型的Input上传文件不一定要点击上传按钮，点在Input身上即可 */#file-input {opacity: 0;box-sizing: border-box;width: 100px;height: 100px;}.preview {position: relative;width: 100px;height: 100px;margin: 0 20px;border-radius: 5px;}.preview-img {width: 100%;height: 100%;}.delete {position: absolute;width: 10px;height: 10px;top: -5px;right: -5px;color: red;}</style>
</head><body><form class="container" action=""><div class="upload"><input type="file" id="file-input" hidden></div><div class="show-box"></div></form><div class="show-img"></div><script>let input = document.querySelector('input[type="file"]');let showImg = document.querySelector('.show-img');let imgInput = document.querySelector('#file-input');let uploadBox = document.querySelector('.upload');//点击别的位置调用inputFile功能uploadBox.addEventListener('click',function(e){imgInput.click();},false);//拖拽上传showImg.addEventListener('dragover',function(e){e.preventDefault();},false);showImg.addEventListener('drop',function(e){e.preventDefault();let file =  e.dataTransfer.files[0];createBolbFile(file)},false);//点击input上传input.addEventListener('change', function (e) {console.log(input.files[0]);//拿到input当前上传的文件，拿不到url，想在页面展示必须有urllet file = this.files[0];// createFileReader(file);createBolbFile(file)}, false);function createImg(src){let img = document.createElement('img');img.src = src;showImg.append(img);}//生成临时blob存储function createBolbFile(file){let url = URL.createObjectURL(file); //生成一个临时地址blob，不可持续//创建一个url的blob ，在当前会话下生效，不像base64那样在哪里都能用，如在浏览器中用，当你关掉浏览器再开浏览器用则不生效，是一种临时文件createImg(url)}//base64存储function createFileReader(file) {let fileReader = new FileReader();//通过FileReader的result可以拿到文件的urlfileReader.readAsDataURL(file);//把文件创建成url的data对象fileReader.onload = function () { //file加载完成才可以拿到urllet src = this.result  //base64存储createImg(src);}}/* base64存储base64是新的文件协议格式，传输8bit字节码的编码方式，借助64个可以表示字符[A,B,C...1,2,3] 转换二进制 base64 字符串通用性很强 不依赖平台 不依赖环境 可持续 ，可以以字符串的形式传输图片、文档等可以很方便的用来展示图片，下载文档-----------------------------------------------blob存储如果要持续存储用base64，只是临时调用用blobblob网址URL只能在浏览器内部生成 URL/Object 允许Blob 和 file对象用作图像上 二进制数据连接URL源 URL.createObjectURL(file) 生成地址同一个会话中 同一个浏览器实例中可以使用 临时的对象地址 不可持续*/</script>
</body></html>

相关文章：

拖拽上传（预览图片）

需求 点击上传图片&#xff0c;或直接拖拽图片到红色方框里面也可上传图片&#xff0c;上传后预览图片 效果 实现 <!DOCTYPE html> <html lang"zh-cn"><head><meta charset"UTF-8"><meta name"viewport" content&…...

编程日记 2024/7/22 10:21:32

Oracle 12c新特性 In-Memory Column Store

Oracle 12c引入了一项重要的特性——In-Memory Column Store&#xff08;简称IM或In-Memory&#xff09;&#xff0c;这一特性极大地提升了数据库在处理分析型查询时的性能。以下是关于Oracle 12c In-Memory特性的详细介绍&#xff1a; 一、基本概念 In-Memory Column Store&…...

编程日记 2024/7/22 10:20:31

【数据结构】二叉树———Lesson2

Hi~&#xff01;这里是奋斗的小羊&#xff0c;很荣幸您能阅读我的文章&#xff0c;诚请评论指点&#xff0c;欢迎欢迎 ~~ &#x1f4a5;&#x1f4a5;个人主页&#xff1a;奋斗的小羊 &#x1f4a5;&#x1f4a5;所属专栏&#xff1a;C语言 &#x1f680;本系列文章为个人学习…...

编程日记 2024/7/22 10:13:24

mongodb数据导出与导入

一、先去检查mongodump mongodump --version 如果报 mongodump version: built-without-version-string 或者其他的较老的版本&#xff0c;直接去下载最新的【传送门】 【以Ubuntu18.04为例】 安装工具 假设你下载的是 .tgz 文件&#xff08;适用于 Linux 系统&#xff09;&am…...

编程日记 2024/7/22 10:12:23

电路学习——经典运放电路之滞回比较器（施密特触发器）（2024.07.18）

参考链接1: 电子设计教程29&#xff1a;滞回比较器&#xff08;施密特触发器&#xff09; 参考链接2: 滞回比较器电路详细分析 参考链接3: 比较器精髓&#xff1a;施密特触发器&#xff0c;正反馈的妙用 参考链接4: 比较器反馈电阻选多大&#xff1f;理解滞后效应&#xff0c;轻…...

编程日记 2024/7/22 10:00:09

NVIDIA Container Toolkit 安装与配置帮助文档(Ubuntu,Docker)

NVIDIA Container Toolkit 安装与配置帮助文档(Ubuntu,Docker) 本文档详细介绍了在 Ubuntu Server 22.04 上使用 Docker 安装和配置 NVIDIA Container Toolkit 的过程。 概述 NVIDIA 容器工具包使用户能够构建和运行 GPU 加速容器。即可以在容器中使用NVIDIA显卡。 架构图如…...

编程日记 2024/7/22 9:59:08

JavaWeb day01-HTML入门

Web前端 课程安排 HTML、CSS简介 HTML快速入门 实现标题排版 新闻标题样式...

编程日记 2024/7/22 9:58:06

驱动框架——CMSIS第一部分 RTE驱动框架介绍

一、介绍CMISIS 什么是CMSIS&#xff08;cortex microcontrol software interface standard一种软件标准接口&#xff09;&#xff0c;官网地址&#xff1a;https://arm-software.github.io/CMSIS_6/latest/General/index.html 包含的core、driver、RTOS、dsp、nn等部分&…...

编程日记 2024/7/22 9:50:59

Debezium日常分享系列之：Debezium2.7版本PostgreSQL数据库连接器

Debezium日常分享系列之：Debezium2.7版本PostgreSQL数据库连接器 一、概述二、连接器的工作原理安全快照初始快照的默认工作流程行为临时快照触发临时增量快照触发临时阻塞快照增量快照增量快照流程Debezium 如何解决具有相同主键的记录之间的冲突快照窗口触发增量快照具有附加…...

编程日记 2024/7/22 9:46:54

保障信息系统安全保护等级调整期间的安全性

保障信息系统安全保护等级调整期间的安全性&#xff1a; 策略与实践 在当今数字化时代&#xff0c;信息系统已成为企业和组织运营的核心支撑。为了适应不断变化的业务需求和安全威胁环境&#xff0c;信息系统安全保护等级的调整成为必要之举。然而&#xff0c;这一调整过程可能…...

编程日记 2024/7/22 9:42:49

实战：shell编程之全量命令练习

概叙 槽点~~~~~~~&#xff01; 往期shell相关文章回顾&#xff0c;有兴趣的可以自行阅读和练习。 科普文&#xff1a;一文搞懂Vim-CSDN博客 科普文&#xff1a;jvm笔记-CSDN博客 科普文&#xff1a;一天学会shell编程-CSDN博客 科普文&#xff1a;Linux服务器巡检小结_lin…...

编程日记 2024/7/22 9:33:37

在 CentOS 7 上编译安装 Python 3.11

安装必要的依赖 首先&#xff0c;你需要安装一些开发工具和库&#xff0c;以便编译 Python 和 OpenSSL&#xff1a; yum -y groupinstall "Development tools" yum install -y wget gcc-c pcre pcre-devel zlib zlib-devel libffi-devel zlib1g-dev openssl-devel …...

编程日记 2024/7/22 9:30:31

Qt 4.8.7 + MSVC 中文乱码问题深入分析

此问题很常见&#xff0c;然而网上关于此问题的分析大多不够深刻&#xff0c;甚至有错误&#xff1b;加之Qt5又更改了一些编码策略&#xff0c;而很多文章并未提及版本问题&#xff0c;或是就算提了&#xff0c;读者也不重视。这些因素很容易让读者产生误导。今日我彻底研究透了…...

编程日记 2024/7/22 9:27:27

IDEA的常见代码模板的使用

《IDEA破解、配置、使用技巧与实战教程》系列文章目录 第一章 IDEA破解与HelloWorld的实战编写 第二章 IDEA的详细设置 第三章 IDEA的工程与模块管理 第四章 IDEA的常见代码模板的使用 第五章 IDEA中常用的快捷键 第六章 IDEA的断点调试&#xff08;Debug&#xff09; 第七章 …...

编程日记 2024/7/22 9:23:23

arcgis怎么选取某个指定区域地方的数据，比如从全国乡镇数据选取长沙市乡镇数据

一共5个步骤&#xff0c;没一句废话&#xff0c;耐心看完。看完你就会在任何软件选取指定范围的数据了。 一、如图&#xff0c;先将数据加载到arcgis里面&#xff0c;我们要选取里面长沙市的范围数据。 二、选取长沙市的语句 “市” like ‘长沙%’ 切记&#xff0c;切记&…...

编程日记 2024/7/22 9:22:21

二、链表（1）

203.移除链表元素 创建一个虚拟哨兵头节点&#xff0c;就不用考虑原本头结点要不要删除 # Definition for singly-linked list. # class ListNode: # def __init__(self, val0, nextNone): # self.val val # self.next next class Solution:def remove…...

编程日记 2024/7/22 9:20:19

KAFKA搭建教程

KAFKA搭建教程 期待您的关注 KAFKA学习笔记 帮助更多人 目录 KAFKA搭建教程 1.下载Kafka并解压 2.添加环境变量 3.修改 server.properties 文件 4.将kafka复制到其它节点 5.修改node1、node2节点的broker.id 6.将master的环境变量同步到node1、 node2 7.启动zookeeper…...

编程日记 2024/7/22 9:17:11

Linux网络——套接字与UdpServer

目录 一、socket 编程接口 1.1 sockaddr 结构 1.2 socket 常见API 二、封装 InetAddr 三、网络字节序 四、封装通用 UdpServer 服务端 4.1 整体框架 4.2 类的初始化 4.2.1 socket 4.2.2 bind 4.2.3 创建流式套接字 4.2.4 填充结构体 4.3 服务器的运行 4.3.1 rec…...

编程日记 2024/7/22 9:08:02

SpringBoot源码深度解析

今天&#xff0c;聊聊SpringBoot的源码&#xff0c;本博客聊的版本为v2.0.3.RELEASE。目前SpringBoot的最新版为v3.3.2&#xff0c;可能目前有些公司使用的SpringBoot版本高于我这个版本。但是没关系&#xff0c;因为版本越新&#xff0c;新增的功能越多&#xff0c;反而对Spri…...

编程日记 2024/7/22 9:07:00

【Qt】常用控件

文章目录 QWidgetenabledgeometrywindow framewindowTitlewindowIconqrc资源管理windowOpacitycursorfonttoolTipfocusPolicystyleSheet 按钮类PushButtonRadioButtonCheckBoxSignals 显示类LabelLCDNumberProgressBarCalendar 输入类LineEditTextEditComboBoxSpinBoxDateTimeE…...

编程日记 2024/7/22 9:05:59

electron 主进程和渲染进程通信

在Electron中，主进程（main process）和渲染进程（renderer process）之间的通信是非常重要的，因为Electron应用通常会将用户界面（由Web技术如HTML, CSS, 和JavaScript构建）和原生功能（如系统对话框、文件I/O等）分开处理。主进程管理应用的生命周期和创建渲染进程，而渲染…...

编程日记 2024/7/22 9:03:56

【ARM】MDK-解决CMSIS_DAP.DLL missing报错

【更多软件使用问题请点击亿道电子官方网站】 1、 文档目标 记录解决CMSIS_DAP.DLL missing的报错情况&#xff0c;对应相关报错信息&#xff0c;供后续客户参考&#xff0c;快速解决客户问题。 2、 问题场景 客户进行硬件调试时&#xff0c;发现Target设置内有CMSIS_DAP.DL…...

编程日记 2024/7/22 9:02:55

CSS 的环境变量函数env()

在CSS中&#xff0c;env() 函数并不是传统意义上的“环境变量”函数&#xff0c;如你在编程语言中可能遇到的那样。相反&#xff0c;env() 是CSS中的一个函数&#xff0c;它用于访问由宿主环境&#xff08;如浏览器&#xff09;提供给CSS的自定义属性&#xff08;也称为环境变量…...

编程日记 2024/7/22 8:57:50

数学建模--国赛备赛---TOPSIS算法

目录 1.准备部分 1.1提交材料 1.2MD5码相关要求 2.TOPSIS算法 2.1算法概述 2.2基本概念 2.3算法核心思想 2.4拓展思考 3.适用赛题 3.1适用赛题说明 3.2适用赛题举例 4.赛题分析 4.1指标的分类 4.2数据预处理 4.2.1区间型属性的变换 4.2.2向量规范化 4.3数据加…...

编程日记 2024/7/22 8:56:48

均值滤波算法及实现

均值滤波器的使用场景&#xff1a; 均值滤波器使用于处理一些如上述蓝色线的高斯噪声场景 红色曲线是经过均值滤波处理后的数据。主要因为均值滤波设置数据缓冲区&#xff08;也即延时周期&#xff09;&#xff0c;使得测量值经过缓冲不会出现特别大的变化。 黄色曲线为高斯噪声…...

编程日记 2024/7/22 8:55:47

【Apache Doris】周FAQ集锦：第 16 期

【Apache Doris】周FAQ集锦&#xff1a;第 16 期 SQL问题数据操作问题运维常见问题其它问题关于社区 欢迎查阅本周的 Apache Doris 社区 FAQ 栏目&#xff01; 在这个栏目中&#xff0c;每周将筛选社区反馈的热门问题和话题&#xff0c;重点回答并进行深入探讨。旨在为广大用户…...

编程日记 2024/7/22 8:51:44

单例模式_Golang

目录 一、单例模式 1.1 基本概念 1.2 使用场景 二、Golang实现 2.1 懒汉模式&#xff08;Lazy Loading&#xff09; 一、单例模式 1.1 基本概念 一个类只能生成一个实例&#xff0c;且该类能自行创建这个实例的一种模式,这个定义个人感觉可以拆的通俗一些,在项目的生命周…...

编程日记 2024/7/22 8:48:42

代码随想录 day 18 二叉树

第六章 二叉树part06 详细布置 530.二叉搜索树的最小绝对差 需要领悟一下二叉树遍历上双指针操作&#xff0c;优先掌握递归 题目链接/文章讲解&#xff1a;https://programmercarl.com/0530.%E4%BA%8C%E5%8F%89%E6%90%9C%E7%B4%A2%E6%A0%91%E7%9A%84%E6%9C%80%E5%B0%8F%E7%B…...

编程日记 2024/7/22 8:45:39

降雨量预测 | Matlab基于ARIMA-RBF降雨量预测

目录 效果一览基本介绍程序设计参考资料 效果一览 基本介绍 降雨量预测 | Matlab基于ARIMA-RBF降雨量预测 注&#xff1a;程序和数据放在一个文件夹。 程序语言为matlab&#xff0c;程序可出预测效果图&#xff0c;指标图; 代码特点&#xff1a;参数化编程、参数可方便更改、代…...

编程日记 2024/7/22 8:44:37

包含示例和模板的流程文档指南

当您的业务扩展时&#xff0c;您会得到越来越多的移动部件&#xff0c;并且需要有人来跟踪复杂性。人员和任务需要以尽可能最高效的方式进行组织&#xff0c;并且您必须找到某种方法让员工知道如何执行有效完成工作所需的流程。 为了使流程可重复&#xff0c;需要对其进行记录…...

编程日记 2024/7/22 8:35:29

wordpress后台操作教程/昭通网站seo

今天看视频教程无意间看到了一个数3减1的问题&#xff0c;百度之发现叫约瑟夫环问题&#xff0c;于是写了程序&#xff0c;问题大致描述如下&#xff1a; 一群带有编号的孩子手拉手围成一个圈报数&#xff0c;开始的孩子数1&#xff0c;他右边数2&#xff0c;再右边数3&#xf…...

编程日记 2024/11/15 18:32:30

开原网站开发/长沙seo研究中心

假设文件名是test.txt,需要在第四行前面插入一行"good baby" sed -i 4 s/^/good baby\n/ test.txt 复制代码用system()来执行sed命令方式&#xff1a; http://blog.csdn.net/qq_22122811/article/details/78294744...

编程日记 2024/11/15 18:01:03

php根据ip 跳转网站/怎么做产品推广平台

1、接口类似于类&#xff0c;但接口的成员都没有执行方式&#xff0c;它只是方法、属性、事件和索引符的组合而已&#xff0c;并且也只能包含这四种成员&#xff1b;类除了这四种成员之外还可以别的成员(如字段)。2、不能实例化一个接口&#xff0c;接口只包括成员的签名&#…...

编程日记 2024/11/15 16:47:00

asp网站域名/seo网站推广简历

由MySQL提供的模式匹配的其它类型是使用扩展正则表达式。当你对这类模式进行匹配测试时&#xff0c;使用REGEXP和NOT REGEXP操作符(或RLIKE和NOT RLIKE&#xff0c;它们是同义词)。3. 正则表达式的使用&#xff1b;扩展正则表达式的一些字符是&#xff1a; ‘.’匹配任…...

编程日记 2024/11/15 16:30:51

太原做响应式网站/网站优化推广公司

今天这一篇把之前没有搞懂的TreeSet中的比较搞得非常的清楚&#xff0c;也懂得了它的底层实现。希望博友提意见&#xff01; 一、Set接口 1.1、Set集合概述 Set集合&#xff1a;它类似于一个罐子&#xff0c;程序可以依次把多个对象 “丢进” Set 集合&#xff0c;而 Set 集合通…...

编程日记 2024/11/15 7:03:05

介绍做燕窝的网站/百度搜索推广费用

UVM验证环境–force的一种用法...

编程日记 2024/11/15 5:18:02