zoukankan      html  css  js  c++  java
  • 学习web前端技术的笔记,仅供自己查阅备忘,图片上传预览

    <!DOCTYPE html>
    <html>
    <head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-store, must-revalidate">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <title>微笑天使</title>
    <link rel="stylesheet" href="css/public.css"/>
    <script src="js/jquery-1.11.2.min.js"></script>
    </head>
    <body>
    <div class="content wrapper">
    <div class="page-top">
    <img src="images/bg_01.jpg" />
    </div>
    <div class="page-cnt">
    <img src="images/title_02.jpg" />
    <div class="page-box">
    <img src="images/img_01.jpg" />
    </div>

    <img src="images/title_03.jpg" />
    <div class="formbox page-box">
    <form action="" method="post" class="formbox-form" >
    <ul>
    <li>
    <span>姓&nbsp;&nbsp;&nbsp;&nbsp;名</span>
    <input type="text" name="name" class="bb-name" />
    </li>
    <li>
    <span>所属银行</span>
    <input type="text" name="bank" class="bb-bank" />
    </li>
    <li>
    <span>上传照片</span>
    <span class="file">
    点击上传
    <input type="file" name="picture" accept="image/*" class="bb-pic" />
    </span>
    </li>
    <li class="picshow hide">
    <img src="images/title_01.jpg" />
    </li>
    <li>
    <input type="button" class="post-btn" value="提交信息" />
    </li>
    </ul>
    </form>
    </div>
    </div>
    </div>
    </body>
    <script>
    window.getUrl=(function(){
    try{
    return window.URL.createObjectURL
    }catch(e){
    try{
    return window.webkitURL.createObjectURL
    }catch (e){
    return function(){return '';};
    }
    }
    })();
      //预览
    $(function(){
    $('.bb-pic').on('change',function(){
    var _file=this.files[0];
    var _src = getUrl(_file);
    $('.picshow img').attr('src',_src);
    $('.picshow img')[0].onload=function(){
    $('.picshow').slideDown();
    };
    });

    $('.post-btn').on('click',function(){
    var _name=$('.bb-name').val();
    var _bank=$('.bb-bank').val();
    var _pic =$('.bb-pic').val();
    if(_name==""){alert('请填写姓名');return false;}
    if(_bank==""){alert('请填写所属银行');return false;}
    if(_pic==""){alert('请选择照片');return false;}
    $('.formbox-form').submit();
    });
    })
    </script>
    </html>
  • 相关阅读:
    UVA Live Achrive 4327 Parade (单调队列,dp)
    从磁盘读取一个文件到内存中,再打印到控制台
    二分查找法
    日期:Date
    线程与进程
    泛型基本知识
    泛型
    Map集合的遍历方式:
    Arrays
    Set接口
  • 原文地址:https://www.cnblogs.com/opcec/p/5431106.html
Copyright © 2011-2022 走看看