图片上传

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Document</title>

<style>

button{background: #3b72bb; color: #fff; border-radius: 3px; height: 40px; width: 100px; border: none;

margin: auto; display: block; margin-top: 20px;

}

</style>

</head>

<body>

  <div id="localImag"><img id="preview" width=-1 height=-1 style="diplay:none" /></div>  

    <input type='file' name="doc" id="doc" hidden/>  

  <button id="xuanze">选择图片</button>

  <script> 
    var docObj=document.getElementById("doc"); 
    var imgObjPreview=document.getElementById("preview");  
    var localImagId = document.getElementById("localImag");   
    document.getElementById("xuanze").οnclick=function(){

      document.getElementById("doc").click();

    }
    docObj.onchange = function(){
        

        if(docObj.files &&    docObj.files[0]){  

            //火狐下,直接设img属性  

            imgObjPreview.style.display = 'block';  

            imgObjPreview.style.width = '300px';  

            imgObjPreview.style.height = '500px'; 

            imgObjPreview.style.margin ='auto';

            //imgObjPreview.src = docObj.files[0].getAsDataURL();  

            //火狐7以上版本不能用上面的getAsDataURL()方式获取,需要一下方式    

            imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);  

        }
        else{  

                //IE下,使用滤镜  

                docObj.select();  

                var imgSrc = document.selection.createRange().text;  

                

                //必须设置初始大小  

                localImagId.style.width = "300px";  

                localImagId.style.height = "120px";  

                //图片异常的捕捉,防止用户修改后缀来伪造图片  

              try{

                  localImagId.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";  

                  localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;  

              }catch(e){  

                  alert("您上传的图片格式不正确,请重新选择!");  

                  return false;  

              }  

                imgObjPreview.style.display = 'none';  

                document.selection.empty();  

        }  

        return true;  
    }

</script>

</body>

</html>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值