HTML代码:

  <form action="__SELF__" method="post" enctype='multipart/form-data'>
        <input type='hidden' name='biaozhi' value='1' />
          <label><span>认证类型:</span><font size='2px'>营业执照号</font></label>
            <label>
               <span>执照照片:</span>
                <div class="add-img" style="width:70px;height: 70px;border: 1px solid #CCCCCC;text-align: center;line-height: 70px;background: #CCCCCC;color: #fff;margin-left: 100px"><input name='nature_pic' type="file" id='pic' style="display: none;width:70px;height: 70px">+
                  <img style="display:none; width:70px;height:70px;margin-top:-70px" src="" id="oImg"/>
                </div>
                <font>只需上传公司营业执照照片,客服MM会快速帮您完善企业信息</font>
            </label>
            <lable><span>&nbsp;</span></lable>
             <label style="margin-top:50px"><input type="submit" value="保存信息" class="sub" /><a href="###" class="chongzhi">重置</a></label>
       </form>

JS代码:

<script>
//营业执照照片
/////////////////////////////////////// 上传图片显示功能部分    
    $("#pic").change(function(){
        //判断图片的限制
        var filepath=$("input[name='nature_pic']").val();
          var extStart=filepath.lastIndexOf(".");
          var ext=filepath.substring(extStart,filepath.length).toUpperCase();
           if(ext!=".BMP"&&ext!=".PNG"&&ext!=".GIF"&&ext!=".JPG"&&ext!=".JPEG"){
              alert("图片限于bmp,png,gif,jpeg,jpg格式");
              return false;
          }
          var file_size = 0;
         file_size = this.files[0].size;
         var size = file_size / 1024;
         if(size > 1024)
         {
             alert('上传的文件大小不能超过1M');
             return false;
         }
        //判断图片限制结束
        var objUrl = getObjectURL(this.files[0]) ;
        alert(objUrl);
        if (objUrl) {
            $("#oImg").attr("src", objUrl).css("display","block");
            // img图片的Id
        }
    }) ;

// 将flie的url 转换为可以 负值的src 地址;
    function getObjectURL(file) {
        var url = null ;
        if (window.createObjectURL!=undefined) { // basic
            url = window.createObjectURL(file) ;
        } else if (window.URL!=undefined) { // mozilla(firefox)
            url = window.URL.createObjectURL(file) ;
        } else if (window.webkitURL!=undefined) { // webkit or chrome
            url = window.webkitURL.createObjectURL(file) ;
        }
        return url ;
    }
</script>

JS上传图片预览及图片限制的更多相关文章

  1. JS 上传图片 + 预览功能(一)

    JS 上传图片 + 预览功能 <body> <input type="file" id="fileimg1" style="disp ...

  2. js:s上次预览,上传图片预览,图片上传预览

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. js上传图片&预览(filereader)

    fileReader HTML5定义了FileReader作为文件API的重要成员用于读取文件,根据W3C的定义,FileReader接口提供了读取文件的方法和包含读取结果的事件模型. FileRea ...

  4. 原生XMLHTTPResponse,jQuery-Ajax 上传文件;iframe上传图片&预览;图片验证码小案例

    原生AJAX Ajax主要就是使用 [XmlHttpRequest]对象来完成请求的操作,该对象在主流浏览器中均存在(除早起的IE),Ajax首次出现IE5.5中存在(ActiveX控件) 1.Xml ...

  5. html js 上传图片 预览

    第一段代码是我自己修改之后能够多选显示多预览图,也就是加了个循环,后面的代码是一些解释说明之类的,抄的 <!DOCTYPE html> <html> <head> ...

  6. JS 上传图片 + 预览功能(二)

    简单粗暴 直接进入主题: Html <script src="../js/jquery-2.1.1.min.js"></script> <style& ...

  7. 简单实现JS上传图片预览功能

    HTML代码 <div class="upload"> <input type="button" class="btn" ...

  8. js上传图片预览

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. js 上传图片预览

    <script language='javascript'> function show(){ var p=document.getElementById("file1" ...

随机推荐

  1. [1-3] 把时间当做朋友(李笑来)Chapter 3 【提高心智,和时间做朋友】 摘录

    1. 精确感知时间 我有个朋友叫做时间.她跟我真可算作两小无猜,默默陪了二十多年我才开始真正认识她.她原本没有面孔,却因为我总是用文字为她拍照,而因此可以时常伴我左右.她原本无情,我却可以把她当作朋友 ...

  2. ZooKeeper_基础知识学习

    ZooKeeper是Hadoop的开源子项目(Google Chubby的开源实现),它是一个针对大型分布式系统的可靠协调系统,提供的功能包括:配置维护.命名服务.分布式同步.组服务等. Zookee ...

  3. php类库PHP QR Code 二维码

    php类库PHP QR Code 二维码 php类库PHP QR Code 二维码 php类库PHP QR CodePHP QR Code is open source (LGPL) library ...

  4. 敲敲SQL语句

    基本命令 查看数据库:show databases; 选择数据库:use mysql_crash; 连接数据库:需要:主机名,端口,合法用户名,用户口令 mysql -u ben -p -h loca ...

  5. Android Studio 使用笔记:快捷键

    开发工具中的快捷键是必不可少了,AS中在Help菜单中单击 Default Keymap Reference 浏览器会连接到官网,打开对应你操作系统的快捷键页面,这是一个pdf文件.Mac系统独立一份 ...

  6. 机器人的运动范围 剑指offer66题

    include "stdafx.h" #include<vector> #include<algorithm> #include<string> ...

  7. Yarn源码分析之MRAppMaster:作业运行方式Local、Uber、Non-Uber

    基于作业大小因素,MRAppMaster提供了三种作业运行方式:本地Local模式.Uber模式.Non-Uber模式.其中, 1.本地Local模式:通常用于调试: 2.Uber模式:为降低小作业延 ...

  8. MySQL 5.7以上 root用户默认密码问题

    废话少说一句话系列: CentOS系统用yum安装MySQL的朋友,请使用 grep "temporary password" /var/log/mysqld.log 命令,返回结 ...

  9. Win10秘笈:两种方式修改网卡物理地址(MAC)

    每台能够上网的电脑都有网卡,不管是有线还是无线,网卡本身都得有物理地址,也就是MAC(Media Access Control 或 Medium Access Control)地址.这个地址理论上是固 ...

  10. Mybatis+MSSql插入数据的同时并获取自增的ID

    在项目中遇到这样的情况,新增一个角色,这个角色有某些权限,这两个数据存在不同的表中,一个是sys_role,另外一个是sys_role_permission表,注意,现在的逻辑是这样的 1,在表sys ...