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>
查看全文
相关阅读:
Python-属性描叙符协议ORM实现原理依据- __set__ __get__ __delete__
Python-类属性查询协议-__getattr__ __getattribute__
Python-__init__ 和 __new__区别和原理
Python-在不在判断 in 和 in判断协议- in __contains__
Python-求序列长度和序列长度协议-len() __len__
Python-序列反转和序列反转协议-reversed __reversed__
Python-序列切片原理和切片协议-[start:end:step] __getitem__
Python-序列常用方法 + * += extend append方法区别
Python其他数据结构collection模块-namtuple defaultdict deque Queue Counter OrderDict arrary
Python-函数式编程-map reduce filter lambda 三元表达式 闭包
原文地址:https://www.cnblogs.com/yyl001/p/15699687.html
最新文章
mysql的数据库引擎
Spring整合JUnit4进行AOP单元测试的时候,报:"C:Program FilesJavajdk1.8.0_191injava.exe" -ea -Didea.test.cyclic.buffer.size=1048576 "-javaagent:C:Program FilesJetBrainsIntelliJ IDEA 2018.3libidea_rt.jar=64
Spring的IOC底层实现
ubuntu安装Jenkins指导
ubuntu14下创建软件的快捷启动方式
ubuntu安装mysql步骤
VMwareWorkstations中安装ubuntu,apt install报E: Could not get lock /var/lib/dpkg/lock
AttributeError: 'NoneType' object has no attribute 'append'
python在处理CSV文件时,字符串和列表写入的区别
Python在向CSV文件写中文时乱码的处理办法
热门文章
mysql常见问题解决方法.
黑盒测试用例设计——PICT(QQ实践)
黑盒测试用例设计——PICT
黑盒测试用例设计——错误猜测法
Genymotion——VirtualBox cannot start virtual device
Appium——unknown error: cannot activate web view
Appium清空EditText
Selenium Webdriver——操作隐藏的元素
TestNG中DataProvider的用法
Python函数名为参数
Copyright © 2011-2022 走看看