zoukankan
html css js c++ java
上传并查看图片
<!DOCTYPE html> <!-- saved from url=(0034)http://localhost:61694/Image/Index --> <html style="" class=" js flexbox flexboxlegacy canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers no-applicationcache svg inlinesvg smil svgclippaths"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <pre><code><meta name="viewport" content="width=device-width"> <title></title> <link href="./Index_files/bootstrap.css" rel="stylesheet"> </code></pre> <link href="./Index_files/site.css" rel="stylesheet"> <pre><code><script src="./Index_files/modernizr-2.8.3.js.下载"></script> </code></pre> </head> <body> <style> .must{ color:red; font-size:14px; } .userImg1{ 240px; height:135px; display: inline-block; background-color: #f3f5f4; text-align: center; line-height: 135px; vertical-align: top; margin-top:13px; margin-left:8px; cursor:pointer; } .userImg1{ background-size: 240px 135px; } .sub-btn{ 92px; height:35px; background-color: #e1251a; display: block; margin:25px 0 0 94px; border:none; outline: none; color:#fff; cursor:pointer; } input[type="file"] { display: none; } </style> <pre><code><div> <h1>图片选择</h1> <div class="userImg1" onclick="uploadFile('userImg1')" style="background-image: url("blob:http://localhost:61694/5f866f8a-7399-4b10-9870-74e34a237b49");">+添加图片</div> <input type="file" name="uploadImg1" display="none" class="fileBtn" accept="image/*" onchange="dofileBtn(this)"> </div> </code></pre> <script src="./Index_files/jquery-3.3.1.js.下载"></script> <script type="text/javascript"> var fileBtn = document.getElementsByClassName("fileBtn"); function dofileBtn(e) { const fileObj = e.files[0]; const windowURL = window.URL || window.webkitURL; if (fileBtn && fileObj) { const imgURL = window.URL.createObjectURL(fileObj); $(".userImg1").css("background-image", "url(" + imgURL + ")"); } } function uploadFile(e) { $(".fileBtn").click(); } $(".fileBtn").on("change", dofileBtn); </script> <pre><code></div> </code></pre> </body></html>
查看全文
相关阅读:
深入理解系统调用
基于mykernel 2.0编写一个操作系统内核
交互式多媒体图书平台的设计与实现
Ubuntu下VSCode调试环境搭建指南-C语言篇
码农的自我修养之必备技能 学习笔记
工程化编程实战callback接口学习笔记
CentOS7.4网络配置
R-CNN
CUDA整理
CUDA by Example 第四章 julia集
原文地址:https://www.cnblogs.com/yyl001/p/15699687.html
最新文章
在CentOS 7上安装RabbitMQ服务器
Docker运行Springboot项目
CentOS 7 安装ActiveMQ
CentOS 7 关闭防火墙
CentOS 7 安装redis
SpringBoot整合thymeleaf
Java动态代理
手写实现简单的Mybatis
Java7 的Random伪随机数和线程安全的ThreadLocalRandom
Spring注解的(List&Map)特殊注入功能 (源码没有看)
热门文章
SpringBoot session 共享(copy自微信公众号的文章)
font-awesome图标使用
Springboot 关于不需要重启的两种解决方案(Devtools方案和Update classes and resources方案)
IntelliJ IDEA 无法热加载自动更新,On 'update' action:选项里面没有update classes and resources这项
事务的七种传播行为(以代码为例,做个笔记)
Spring Data JPA事务支持
Spring 事务 -- @Transactional的使用
Spring 事务传播行为
课程学习总结报告
结合中断上下文切换和进程上下文切换分析Linux内核的一般执行过程
Copyright © 2011-2022 走看看