<!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. 小白的Python之路 if __name__ == '__main__' 解析

    if __name__ == '__main__' 参考文献: http://www.cnblogs.com/xuxm2007/archive/2010/08/04/1792463.html http ...

  2. JaveScript流程控制(JS知识点归纳四)

    01 流程控制 顺序结构: 程序的默认执行方式 条件判断语句:也称之为分支结构,选择结构:如果程序要执行的代码出现了多种情况需要使用 循环结构:当代码需要多次重复执行多次时,使用 02 条件判断语句 ...

  3. BZOJ4817 SDOI2017 相关分析

    4821: [Sdoi2017]相关分析 Time Limit: 10 Sec  Memory Limit: 128 MBSec  Special Judge Description Frank对天文 ...

  4. 使用CSS画图之三角形(一)

    简单的画一个三角形,代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset ...

  5. MySQL 字符集问题及安全的更新操作

    一.字符集乱码 1.操作系统字符集 [root@mysql5 ~]# cat /etc/system-release /etc/sysconfig/i18n CentOS release 6.5 (F ...

  6. JaCoCo 代码覆盖率工具（基于Maven+TestNG）

    JaCoco是一个代码覆盖率库. 官方网站:http://www.jacoco.org/ 安装: 以 Maven(http://www.testclass.net/maven/) 安装为例: < ...

  7. Qt个人研究进展

    1:纯socket通信实现多线程邮件发送,支持多个收件人和附件,通用任何平台,包括ARM.2:纯串口通信AT命令实现多线程短信收发,支持多个收件人和长短信,通用任何平台,包括ARM.3:纯串口通信PO ...

  8. 【liferay】2、可配置portlet

    定义:edit和config模式一般没有使用,对于使用editor和config等模式的portlet,我们可以将他们称为可配置portlet. 我们先新建一个portlet项 添加可配置的控制元素, ...

  9. java inputstream to string stack overflow

    https://stackoverflow.com/questions/309424/read-convert-an-inputstream-to-a-string 过千赞的答案

  10. thinkinginjava学习笔记01_导论

    初学java,希望旅途愉快  :) 类型决定对象的接口,(有人认为类是类型的特定实现),接口确定对象所能发出的请求(消息),满足请求的代码和隐藏的数据一起构成实现: 对象设计时,应该很好地完成一项任务 ...