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="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>

转载于:https://www.cnblogs.com/sweet521/p/5626499.html