js 本地图片上传预览实现代码

//IE 浏览器下

代码如下	复制代码
document.getElementById("upload").onchange = function() { document.getElementById("image").src = this.value; }

//FF下有getAsDataURL的方法可以生成图片的DataURL

代码如下	复制代码
document.getElementById("upload").onchange = function() { document.getElementById("image").src = this.files[0].getAsDataURL(); }

我们把上面的代码总结一下

代码如下

复制代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
/**
* 从 file 域获取本地图片 url
*/
function getFileUrl(sourceId) {
  var url;
  if (navigator.userAgent.indexOf("MSIE")>=1) { // IE
   url = document.getElementById(sourceId).value;
  } else if(navigator.userAgent.indexOf("Firefox")>0) { // Firefox
   url = document.getElementById(sourceId).files.item(0).getAsDataURL();
  }
  return url;
}

/**
* 将本地图片显示到浏览器上
*/
function preImg(sourceId, targetId) {
  var url = getFileUrl(sourceId);
  var imgPre = document.getElementById(targetId);
  imgPre.src = url;
}
</script>
</head>
<body>
<form action="">
  <input type="file" name="imgOne" id="imgOne" onchange="preImg(this.id,'imgPre');" />
  <img id="imgPre" src="" width="300px" height="300px" style="display: block;" />
</form>
</body>
</html>

用DOM来创建对象
　　在上面的XHTML代码中，我们为了预览图片，事先加入了一个没有设置src的img对象。除去不美观、代码冗余之外，如果用户浏览器不支持Javascript，他不仅无法使用这个功能，还要接受页面上一个永远不会显示出来的破图。要解决这个问题，我们就需要在“运行时”再生成这个img对象，途径还是DOM。

代码如下

复制代码

<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 fileName = docObj.value;
    var imgObjPreview=document.getElementById("preview");
        if(docObj.files && docObj.files[0]){
            //火狐下，直接设img属性
            imgObjPreview.style.display = 'block';
            imgObjPreview.style.width = '150px';
            imgObjPreview.style.height = '120px';
            imgObjPreview.src = docObj.files[0].getAsDataURL();
        }else{
            //IE下，使用滤镜
            docObj.select();
            var imgSrc = document.selection.createRange().text;
            var localImagId = document.getElementById("localImag");
            //必须设置初始大小
            localImagId.style.width = "150px";
            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>

时间： 2024-08-24 14:13:04

js 本地图片上传预览实现代码

js 本地图片上传预览实现代码的相关文章

ie8本地图片上传预览示例代码

ie8本地图片上传预览示例代码_javascript技巧

js实现图片上传预览及进度条

JS实现图片上传预览功能_javascript技巧

jquery 图片上传预览插件代码

js前端实现多图图片上传预览的两个方法(推荐)_javascript技巧

模拟QQ心情图片上传预览示例_实用技巧

javascript 图片上传预览-兼容标准_javascript技巧

JavaScript 图片上传预览效果