<!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="data:images/bg_01.jpg" />
        </div>
        <div class="page-cnt">
            <img src="data:images/title_02.jpg" />
            <div class="page-box">
                <img src="data:images/img_01.jpg" />
            </div>

            <img src="data: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="data: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>

学习web前端技术的笔记，仅供自己查阅备忘，图片上传预览的更多相关文章

  1. ASP.NET工作笔记之一：图片上传预览及无刷新上传

    转自:http://www.cnblogs.com/sibiyellow/archive/2012/04/27/jqueryformjs.html 最近项目里面涉及到无刷新上传图片的功能,其实也就是上 ...

  2. 简单的做一个图片上传预览（web前端）

    转载:点击查看原文 在做web项目很多的时候图片都是避免不了的,所以操作图片就成了一个相对比较棘手的问题,其实也不是说很麻烦,只是说上传然后直接预览的过程很恶心,今天简单的做一个处理. 效果预览: & ...

  3. 前端实现图片上传预览并转换base64

    前端实现文件的上传,就必须用到input标签,type属性为file. 在vue项目中通ref操作dom.input有一个属性accept,是必须要搭配type=file使用. multiple可以上 ...

  4. 学习web前端技术的笔记，仅供自己查阅备忘，移动对font-size的控制（并非原创）

    假设根字体font-size的值是40px, 640/40=16,16就是px换算rem的值 function initHtmlFontSize(){ //获取可可视屏幕的宽度 var _width= ...

  5. HTML5开发笔记：图片上传预览

    我们知道通过<input type="file">可以用来进行一个图片或者文件的上传,然而浏览器自带的一个缩略图预览的功能其实是相当不美观的,很多时候我们希望可以在上传 ...

  6. [前端 4] 使用Js实现图片上传预览

    导读:今天做图片上传预览,刚开始的做法是,先将图片上传到Nginx,然后重新加载页面才能看到这个图片.在这个过程中,用户一直都看不到自己上传的文件是什么样子.Ps:我发现我真的有强迫症了,都告诉我说不 ...

  7. js前端实现多图图片上传预览

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C ...

  8. AntDesign vue学习笔记（七）Form 读写与图片上传

    AntDesign Form使用布局相比传统Jquery有点繁琐 (一)先读写一个简单的input为例 <a-form :form="form" layout="v ...

  9. 经验分享：如何系统学习 Web 前端技术？

    这篇文章主要是面向小白用户的,如果你有些基础,当然也建议你看看,尤其是最后一个主题,或许你能得到一些启发.本文的观点,纯属个人自以为是的想法,不是真理,仅供参考. 抛开具体技术细节,先主要谈谈程序员如 ...

随机推荐

  1. Base64转换二进制文件对象 Blob/Base64转换 File 对象

    function convertBase64UrlToBlob(urlData) { var arr = dataurl.split(','),//去掉url的头,并转换为byte type = ar ...

  2. Android Activity生命周期详细解析

    概况 讲Android Activity那怎么都绕不过这张图,这篇文章也是围绕这幅图详细分析. 背景 假设这是你的APP,以此为背景,下面的每个part请结合上图理解. #Case 1 当按下app启 ...

  3. Mysql 备份恢复与xtrabackup备份

  4. 为什么CPU需要时钟这种概念？

    本文同时发表在https://github.com/zhangyachen/zhangyachen.github.io/issues/132 最近在研究计算机里的基本逻辑电路,想到一个问题:为什么CP ...

  5. Bmob 移动后端云服务器平台实现登录注册

    源码下载:http://download.csdn.net/download/jjhahage/10034519 PS:一般情况下,我们在写android程序的时候,想要实现登录注册功能,可以选择自己 ...

  6. Docker 安装入门 --基础镜像

    安装Docker1.Docker命令安装 yum install docker //安装docker包 service docker start //设置服务启动  chkconfig docker ...

  7. eslint常见规则总结

    google: eslint+rules es6: impot When you import the module's default, don't use brace {} 意思是,当你使用默认的 ...

  8. LVS-DR集群搭建

    安装LVS 下载源码包,安装时需要根据自己的内核,下载 ipvsadm-1.26.tar.gz的源码包,在进行编译安装以后,我们需要检查必需包是否安装: 1.对内核文件做链接 # uname -r 2 ...

  9. SpringMVC配置双数据源，一个java项目同时连接两个数据库

    数据源在配置文件中的配置 请点击--->   java架构师项目实战,高并发集群分布式,大数据高可用,视频教程 <pre name="code" class=" ...

  10. shell日志删除（超容量&自动）

    背景:避免双十一磁盘被打爆,本想通过crontab执行,但是删除需要密码,所以用作当机器磁盘高于摸个阈值,进行无关性日志强删 #!/bin/sh #use #sh clean.sh wmporder_ ...