<!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. 【阿里聚安全·安全周刊】双十一背后的“霸下-七层流量清洗”系统| 大疆 VS “白帽子”，到底谁威胁了谁？

    关键词:霸下-七层流量清洗系统丨大疆 VS "白帽子"丨抢购软件 "第一案"丨企业安全建设丨Aadhaar 数据泄漏丨朝鲜APT组织Lazarus丨31款违规A ...

  2. Python学习日记:day7-----集合

    1.基础数据类型汇总补充 1,list: 在循环一个列表是,最好不能删除列表中的元素. 2,bool 空列表.int:0.空str.空dict.空set--->bool:false 其余为tru ...

  3. 谈谈对Python的感想

    写在前面 我用Python已经好几年了,最早学习用Python还是因为对人工神经网络感兴趣,python有个很好用的ANN库neurolab.本人其实也算初学者,充其量算入门了吧,写这篇一来回顾自己所 ...

  4. h5 喜帖

    地址:http://139.196.27.185:8088/ 因为国庆结婚,需要邀请亲朋好友,网上找了些电子请帖,但大都要收费,贵的还有好几百,有的效果还不太好.于是花了些时间自己写了一个. 就是sw ...

  5. class_copyIvarList方法获取实例变量问题引发的思考

    在runtime.h中,你可以通过其中的一个方法来获取实例变量,那就是class_copyIvarList方法,具体的实现如下: - (NSArray *)ivarArray:(Class)cls { ...

  6. 在ubuntu上安装pyenv出现的问题

    1.安装完pyenv时,并没有出现问题.但在安装python3.6.1时报错: ERROR: The Python ssl extension was not compiled. Missing th ...

  7. 教你如何安装配置Windows7系统 IIS IIS7.5本地浏览测试网站 完整版介绍

    大家都知道网站建设前期测试于浏览网站都喜欢用iis本地浏览来操作 那么为了方便大家自己来安装和配置Internet信息服务 相信大家,对于Windows 7有了相应的了解,从操作上,使用上,内置功能上 ...

  8. Linux程序包管理rpm与yum

    Linux程序包管理 Linux中软件的安装主要有两种形式:一种是直接下载源代码包自行编译后安装,另一种直接获取rpm软件包进行安装. 程序的组成部分: 二进制程序:程序的主体文件,比如我们运行一个l ...

  9. HTTP结构

    HTTP结构 转载请注明出处:HTTP结构简介 HTTP通信过程包括从客户端发往服务器的请求和服务器返回客户端的响应,这篇文章就简单的了解一下HTTP请求和响应的结构与协议本身的状态管理. 用户HTT ...

  10. Runtime那些事

    Runtime 前言 从字面意思看,就是运行时.但是这个运行时究竟什么意思?可以把它理解成:不是在编译期也不是在链接期,而是在运行时.那究竟在运行期间做了什么呢?按照苹果官方的说法,就是把一些决策(方 ...