上传并查看图片

zoukankan html css js c++ java

上传并查看图片

<!DOCTYPE html>  <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>

查看全文

相关阅读:
vs15
Areas（区域）
池编程技术
 MyBitis(iBitis)系列随笔之五：多表(一对多关联查询)
MyBatis学习总结(五)——实现关联表查询
 Mapper映射语句高阶应用——ResultMap
mysql中的null字段值的处理及大小写问题
 spring-boot支持双数据源mysql+mongo
No resource identifier found for attribute 'showAsAction' in package 'android'
No resource found that matches the given name 'Theme.AppCompat.Light'.

原文地址：https://www.cnblogs.com/yyl001/p/15699687.html