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. C# NPOI操作Excel(上)

    NPOI 官网下载DLL:http://npoi.codeplex.com/releases 1.读取Excel转为DataTable /// <summary> /// 读取excel转 ...

  2. ST股福音:涨停潮开始! 最全ST摘帽股汇总!

    本周ST股摘帽行情提前预演,ST股上演涨停潮,部分ST股甚至出现连续涨停.云财经在三季报披露之前曾经做过一期ST股摘帽分析,在三季报正式披 露完毕后,以及部分ST公司公布了2015年年报预告,ST股能 ...

  3. layui实现table表格的“关键字搜索”功能

    $('#searchBtn').on('click',function(){ var type = $(this).data('type'); active[type] ? active[type]. ...

  4. deepin linux下eclipse c/c++ 调试开源代码

    1.deepin linux 下使用eclipse c/c++ 调试2. 编译选项,-g3 -O0,-g3表示输出调试信息,-O0不优化代码(第一个字母o的大写,第二个是数字0) 3.必备环境: gd ...

  5. UICollectionView的简单认识和简单实用

    摘要 UICollectionView是比UITableView更加复杂的UI控件,通过它可以实现许多复杂的流布局.但对我们来说,系统提供的接口十分简单易用,并且有十分强的制定性. iOS流布局UIC ...

  6. hdu5795 A Simple Nim 求nim求法,打表找sg值规律 给定n堆石子,每堆有若干石子,两个人轮流操作,每次操作可以选择任意一堆取走任意个石子(不可以为空) 或者选择一堆,把它分成三堆,每堆不为空。求先手必胜,还是后手必胜。

    /** 题目:A Simple Nim 链接:http://acm.hdu.edu.cn/showproblem.php?pid=5795 题意:给定n堆石子,每堆有若干石子,两个人轮流操作,每次操作 ...

  7. 百度UEditor -- ZeroClipboard is not defined

    项目中一直在使用UEditor,风平浪静. 近期该项目引入了Requirejs,结果发现在有富文本编辑器的页面都会在控制台报出如下异常: Uncaught ReferenceError: ZeroCl ...

  8. Erlang 和 Elixir的差异

    原文: http://elixir-lang.org/crash-course.html 函数调用 Elixir允许你调用函数的时候省略括号, Erlang不行. Erlang Elixir some ...

  9. spring cloud与K8S

    链接:https://www.zhihu.com/question/50806354/answer/139653085 spring cloud +docker 当然没有问题,只是当我们搭建集群实现高 ...

  10. ThinkPHP 处理商品添加的时候操作多张表 用事务解决。

    #重新父类的add方法 public function add(){ #同时操作多装表,可以考虑用事务来做,要同时插入数据成功要么都不插输入数据. #开启事务的前提是表的引擎必须是InnoDB #开启 ...