javascript预览本地图片程序代码

图片上传预览是一种在图片上传之前对图片进行本地预览的技术。
使用户选择图片后能立即查看图片，而不需上传服务器，提高用户体验。
但随着浏览器安全性的提高，要实现图片上传预览也越来越困难。
不过群众的智慧是无限的，网上已经有很多变通或先进的方法来实现。
例如ie7/ie8的滤镜预览法，firefox 3的getAsDataURL方法。
但在opera、safari和chrome还是没有办法实现本地预览，只能通过后台来支持预览

 代码如下 复制代码

<style type="text/css">
#newPreview
{
     filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);
}
.style1
{
  width: 507px;
}
</style>

</head>
<script language="javascript" type="text/javascript">
 function PreviewImg(imgFile)
{
    var newPreview = document.getElementById("newPreview");
    newPreview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgFile.value;
    newPreview.style.width = "158px";
    newPreview.style.height = "180px";
}
</script>

<div id="newPreview"></div>

<asp:FileUpload ID="FileUpload1" onchange="PreviewImg(this)" runat="server" Width="408px" />

在 IE6 中，可以很方便地利用 img 的 src 属性，实现本地图片预览，然而在 IE7 中，这种办法却行不通

下面来一段兼容性比较强的代码

 代码如下 复制代码

<script language="javascript">
     var isIE = false;
     var isFF = false;
     var isSa = false;
     if((navigator.userAgent.indexOf("MSIE")>0) && (parseInt(navigator.appVersion) >=4))isIE = true;
     if(navigator.userAgent.indexOf("Firefox")>0)isFF = true;
     if(navigator.userAgent.indexOf("Safari")>0)isSa = true;
    
      function fileChange(obj)
      {
         if(isIE)
         {
            var url = obj.value;
            url = "file:///" + url.replace("\",'/');
                       
         }
         else if(isFF)
         {
             var url = obj.files.item(0).getAsDataURL();
            
         }
         document.getElementById("ImageFile").src= url;
      }
    
    </script>

<asp:FileUpload id=FileUpload1 onchange="fileChange(this);" runat="server"></asp:FileUpload><asp:Image id=ImageFile runat="server"></asp:Image>

明明IE和火狐都正常的代码，这个小不点的chrome浏览器非要跳出来不兼容你的代码。请无视google吧。
firefox使用了getAsDataURL方法，而IE是用了滤镜。

 代码如下 复制代码

<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-12-23 06:14:39

javascript预览本地图片程序代码的相关文章

javascript预览本地图片

javascript <input id="file" type="file" ><br /><img id="img"  STYLE="visibility:hidden" height="100px" width="100px"> <script language="javascript" type="text/

as 3.0图片上传预览本地图片

需要Flash Player 10+版本的支持, [注意]: 1.我这边图片上传路径是无效的,所以图片上传失败是正常的,你们可以改一下上传路径即可: 2.需要Flash Player 10的支持: 3.这次主要研究是预览本地图片功能. 演示效果: 实现代码: view plaincopy to clipboardprint? package project.test     {        import flash.display.*;        import flash.geom.Rec

预览本地图片 支持多个预览

问题描述 预览本地图片 支持多个预览 mvc 4.0 中我使用了 input type file 标签 可以多选图片,我现在想选择完图片后 预览本地图片可以预览多个 解决方案 http://www.th7.cn/Program/net/201507/496865.shtml 本地预览需要activex的支持,IE下可用fso对象. 解决方案二: 支持预览功能的图片上传控件

getAsDataURL在Firefox7.0下无法预览本地图片的解决方法_javascript技巧

用uchome普通上传来举例,取原代码:return obj.files.item(0).getAsDataURL(); 升级到Firefox7.0后,需要改为:return window.URL.createObjectURL(obj.files[0]); 实际上就是Firefox7.0废弃了item属性.

Asp.net图片上传实现预览效果的简单代码

这篇文章介绍了Asp.net图片上传实现预览效果的简单代码,有需要的朋友可以参考一下   在页面上放入一个上传控件和一个图片控件. 复制代码 代码如下:  <asp:FileUpload ID="FileUpload1" runat="server" onpropertychange="show(this.value)"/>         <asp:Image ID="Image1" runat="

jQuery实现图片放大预览实现原理及代码_jquery

对于一些比较小的图片,通过鼠标移动到图片上进行放大显示,原理很简单,就是将图片显示的尺寸变大后放在浏览器的一个指定位置,从而实现图片的放大预览.以下是代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=&q

基于HTML5的可预览多图片Ajax上传_AJAX相关

一.关于图片上传什么什么的 在XHTML的时代,我们使用HTML file控件上传图片一次只能上传一张.要一次上传多图,做法是借助于flash.例如swfupload.js.可惜,使用复杂的点,比如flash文件需与页面同父文件夹,JavaScript文件大小也很可观. 我之前曾翻译编辑过一篇"Ajax Upload多文件上传插件"的文章,此插件的亮点是使用隐藏的iframe框架页面模拟ajax上传,但是,实际上,还是一次只能上传1张图片,可以多次上传而已. HTML5是个好东东,其中

基于HTML5的可预览多图片Ajax上传

一.关于图片上传什么什么的 在XHTML的时代,我们使用HTML file控件上传图片一次只能上传一张.要一次上传多图,做法是借助于flash.例如swfupload.js.可惜,使用复杂的点,比如flash文件需与页面同父文件夹,JavaScript文件大小也很可观. 我之前曾翻译编辑过一篇"Ajax Upload多文件上传插件"的文章,此插件的亮点是使用隐藏的iframe框架页面模拟ajax上传,但是,实际上,还是一次只能上传1张图片,可以多次上传而已. HTML5是个好东东,其中

javascript IE7 浏览器本地图片预览_图象特效

说明:以下针对的是互联网情况,如果您在本地作测试,比如输入的地址是:http://127.0.0.1/...,则可以看到全部预览. 如果您使用的是 IE6,则可以看到以下预览:如果您使用的是 IE7,则看不到以下预览. 不论您使用的是 IE6 还是 IE7,均可以看到以下预览. 请选择一个图片进行预览: