<!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. DotNetCasClient 如何获取Cas服务器返回的attributes中的数据

    最近开始接触做与其它认证系统的集成,其中有个是与某学校的CAS服务器集成.cas服务器认证成功后返回的数据格式如下: 其中红色部分是我需要取出来用于识别用户身份的数据. 一开始,我根据网上的教程,引用 ...

  2. Libevent源码分析 (1) hello-world

    Libevent源码分析 (1) hello-world ⑨月份接触了久闻大名的libevent,当时想读读源码,可是由于事情比较多一直没有时间,现在手头的东西基本告一段落了,我准备读读libeven ...

  3. 关于PLC

    学电气的一方面是单片机,一方面是PLC,,,,常常看到说选择比努力更重要,,单片机都很熟悉了,我就来介绍一下PLC..... 然后呢我先吹吹牛,,,目的是让大家相信我介绍的PLC绝对是亲身体验.... ...

  4. 《跟我学IDEA》五、快捷键（编码利器）

    上一篇博文,我们学习了idea的一些模版配置,但是只有模版是不行的,一款编辑器如何能为我们灵活的使用,快捷键的功劳不用多说大家也明白.今天我们就来学习快捷键的配置以及一些常用的快捷键的介绍,为让家能更 ...

  5. js怎么防止变量冲突

    [1]工程师甲编写功能A ? 1 2 3 var a = 1; var b = 2; alert(a+b);//3 [2]工程师乙添加新功能B ? 1 2 3 var a = 2; var b = 1 ...

  6. 深入JS原型与原型链

    要了解原型和原型链,首先要理解普通对象和函数对象. 一.普通对象和函数对象的区别 在Javascript的世界里,全都是对象,而对象之间也是存在区别,我们首先区分一下普通对象和函数对象,如下代码: f ...

  7. Ubuntu 安装MyEclipse10

    Ubuntu 安装MyEclipse10 1.安装JDK 2.下载myeclipse.run 3.  现在假设你的 myeclipse.run 的路径是/home/yourname/myeclipse ...

  8. Xamarin 简单的网络请求

    //try            //{            //    var httpReq = (HttpWebRequest)HttpWebRequest.Create(new Uri(re ...

  9. 【精选】Nginx模块Lua-Nginx-Module学习笔记（一）Nginx Lua API 接口详解

    源码地址:https://github.com/Tinywan/Lua-Nginx-Redis 一.介绍 各种* _by_lua,* _by_lua_block和* _by_lua_file配置指令用 ...

  10. Linux入门篇（二）——文件

    这一系列的Linux入门都是本人在<鸟哥的Linux私房菜>的基础上总结的基本内容,主要是记录下自己的学习过程,也方便大家简要的了解 Linux Distribution是Ubuntu而不 ...