迷城网络 - 专注于中小企业Linux运维服务

当前位置: 迷城网络 > 建站程序 >

js上传图片前实现预览功能

时间:2019-03-27 10:51来源: 作者: 点击:
JavaScript代码实现图片上传前预览,当然是在本地预览,这样可以让用户知道所选择的图片是否正确,实现此功能并不复杂,一段JS代码即可搞定。以下是一个完整的例子,你可以复制代
JavaScript代码实现图片上传前预览,当然是在本地预览,这样可以让用户知道所选择的图片是否正确,实现此功能并不复杂,一段JS代码即可搞定。以下是一个完整的例子,你可以复制代码保存成html网页,然后打开这个网页测试效果。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
        <body> 
                <input type=file name="doc" id="doc" onchange="javascript:setImagePreview();"> 
<p> 
<div id="localImag"><img id="preview" width=-1 height=-1 style="diplay:none" /></div> 
</p> 
<script> 
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 = '300px'; 
                        imgObjPreview.style.height = '120px';                     
                        //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>  


(责任编辑:迷城网络科技)
织梦二维码生成器
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片
栏目列表
推荐内容