zoukankan      html  css  js  c++  java
  • JS上传图片预览及图片限制

    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="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;70px;height: 70px">+
                      <img style="display:none; 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>

  • 相关阅读:
    Vue 备
    mac 下如何建立vue-cli项目
    24,25-request对象
    nodejs 备忘
    nodejs中mysql断线重连
    创建node.js,blog
    Mac 升级node与npm
    js 弹出层,以及在javascript里定义层样式
    js 光标选中 操作
    js 捕获型事件
  • 原文地址:https://www.cnblogs.com/sweet521/p/5626499.html
Copyright © 2011-2022 走看看