免费的QQ技术网,残梦资源网,小刀娱乐网,小高教程网,QQ教程网

网站首页 编程案例 正文

原生JS实现单图片上传预览效果

2017-12-15 编程案例 1086 ℃ 1 评论

原生js单图片上传预览插件

<!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" onchange="javascript:setImagePreview();" hidden/>  
<button id="xuanze">选择图片</button>
<script> 
document.getElementById("xuanze").onclick=function(){
  document.getElementById("doc").click();
}
function setImagePreview() {  
var docObj=document.getElementById("doc");  
var imgObjPreview=document.getElementById("preview");  
    if(docObj.files &&    docObj.files[0]){  
        //火狐下,直接设img属性  
        imgObjPreview.style.display = 'block';  
        imgObjPreview.style.width = '500px';  
        imgObjPreview.style.height = '320px'; 
        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;  
            var localImagId = document.getElementById("localImag");  
            //必须设置初始大小  
            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>


Tags:JS例子

已有1位网友发表了看法:

欢迎 发表评论:

网站分类
标签列表
最近发表