<!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. 将java项目打包成docker镜像

    简介:将jar打包成镜像好说,毕竟jar包长的都是一样的,但是我们只是写了一个普通的java项目,我也不方便封装成jar包什么的,但是我们也想打包docker image怎么办呢,我们可以用编译后的j ...

  2. ArcGIS 网络分析[2] 在ArcMap中使用网络数据集进行五大网络分析[最短路径/服务区/最近设施点/OD成本矩阵/车辆分配]

    上一章花了大篇幅介绍网络数据集的创建,也简单说了下点线的连通性问题. 那么可以试试刀锋不锋利啦! 网络分析呢,ArcGIS提供了5个基本分析类型: 最短路径求解 服务区(服务覆盖范围) 事故突发地的最 ...

  3. Swift学习第二天--面向对象

    //: Playground - noun: a place where people can play import UIKit var str = "Hello, playground& ...

  4. find + xargs + cp 遇到文件名中带空格如何处理

    一,需求为查询文件名为ZRSH开头的时间为7月至今的所有文件并打包 1.首先想到的就是find + xargs + cp  格式.. find 2016073* -type f  -name *ZRS ...

  5. lesson - 2 yum /单用户/救援模式/Linux 启动

    课程大纲:1.  yum使用yum 是一个在线安装软件包的工具,它可以帮我们解决软件包的依赖,这个日后会详细介绍.我们介绍了以下几个用法:yum list    这个命令可以列出所有安装过和未安装的软 ...

  6. LVS-DR集群搭建

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

  7. 豹哥嵌入式讲堂：ARM开发中有用的文件（1）- source文件

    大家好,我是豹哥,猎豹的豹,犀利哥的哥.今天豹哥给大家讲的是嵌入式开发里的source文件种类. 众所周知,嵌入式开发属于偏底层的开发,主要编程语言是C和汇编.所以本文要讲的source文件主要指的就 ...

  8. python科学计算_numpy_ufunc

    ufunc简介 ufunc指universal function,是一种能够对数组中的所有元素进行操作的函数,ufunc是针对数组进行操作的函数,对一个数组进行重复的运算时,使用ufunc比math库 ...

  9. 【JavaScript 】for 循环进化史

    ECMAScript 6已经逐渐普及,经过二十多年的改进,很多功能也有了更成熟的语句,比如 for 循环 这篇博客将介绍一下从最初的 for 循环,到 ES6 的 for-of 等四种遍历方法 先定义 ...

  10. golang map

    Our friend Monk has been made teacher for the day today by his school professors . He is going to te ...