上传并查看图片

<!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">

<meta name="viewport" content="width=device-width">
    <title></title>
    <link href="./Index_files/bootstrap.css" rel="stylesheet">
<link href="./Index_files/site.css" rel="stylesheet">

<script src="./Index_files/modernizr-2.8.3.js.下载"></script>
</head>
<body>
<style>
    .must{
    color:red;
    font-size:14px;
    }
    .userImg1{
    width: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{
    width: 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(&#39;userImg1&#39;)" style="background-image: url(&quot;blob:http://localhost:61694/5f866f8a-7399-4b10-9870-74e34a237b49&quot;);">+添加图片</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>

posted @ 2021-12-16 19:21 乌柒柒阅读(33) 评论(0) 收藏举报

刷新页面返回顶部