zoukankan      html  css  js  c++  java
  • 通过input 展示即将上传的图片(无拍照功能)

     1 template
     2 
     3 <div class="el_uploadImg">
     4   <p>上传安装效果图</p>
     5 <div class="el_imgs"> 
     6 
     7 </div> 
     8   <div class="el_uploadBtn">+
     9     <input type="file" name="file_head" id="file_head" v-on:change="setImagePreview" accept="image/*" capture="camera"/>
    10   </div>
    11 </div>
    12 
    13  
    14 
    15 css
    16 
    17 .el_uploadImg>.el_imgs{
    18    700px;
    19   margin-left: 14px;
    20 }
    21 
    22 .ex_imgs{
    23   position: relative;
    24 }
    25 .ex_imgs>.el_close{
    26   position: absolute;
    27   right: -14px;
    28   top: -12px;
    29    32px;
    30   height: 32px;
    31   background: red;
    32   border-radius: 16px;
    33   color: #fff;
    34   text-align: center;
    35   line-height: 32px;
    36 }
    37 .el_uploadImg>.el_imgs>div{
    38   display: inline-block;
    39 }
    40 .el_uploadImg>.el_imgs>div>img{
    41    200px;
    42   height: 200px;
    43   margin-left: 30px;
    44 }
    45 
    46 javascript
    47 
    48 export default {
    49 name:'el_upload',
    50 data (){
    51 return {
    52 inform: [{
    53 numbers:'A88888888888888888888',
    54 username:'18888888888(王先生)',
    55 code:123456,
    56 }]
    57 }
    58 },
    59 methods:{
    60   setImagePreview : function(){
    61     var file_head = document.getElementById("file_head"),
    62     picture = file_head.value, html = ''; 
    63     if (!picture.match(/.jpg|.gif|.png|.bmp/i)) return alert("您上传的图片格式不正确,请重新选择!"), 
    64     !1; 
    65     if (file_head.files && file_head.files[0]){
    66 
    67       //获得图片的url链接,用于显示图片
    68       var a = window.navigator.userAgent.indexOf("Chrome") >= 1 || window.navigator.userAgent.indexOf("Safari") >= 1 ? window.webkitURL.createObjectURL(file_head.files[0]) : window.URL.createObjectURL(file_head.files[0]);
    69       console.log(!!(file_head.files && file_head.files[0]))
    70       html +='<div class="ex_imgs">'
    71       html += '<img src=' + a + ' class="Preview">';
    72       html += '<i class="el_close" onclick="removeThis(this)">X</i>'
    73       html += '</div>'
    74       $('.el_imgs').prepend(html)
    75     }
    76       //限制显示图片数量
    77     if($('.el_imgs').find('img').length > 2){
    78       $('#file_head').prop('disabled','disabled')
    79     }
    80     }
    81   }
    82 }
  • 相关阅读:
    洛谷 P1578 奶牛浴场 题解
    LOJ167 康托展开 题解
    三校联训 【NOIP模拟】寻找
    洛谷 P1809 过河问题 题解
    有关多边形面积的总结
    LOJ 103 字串查找 题解
    洛谷 P2384 最短路 题解
    POJ 2492 A Bug's Life 题解
    LOJ 10214 计算器 题解
    洛谷 P2868 [USACO07DEC]观光奶牛Sightseeing Cows 题解
  • 原文地址:https://www.cnblogs.com/yzyh/p/7453172.html
Copyright © 2011-2022 走看看