javascript上传前图片预览代码

 代码如下 复制代码

<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" />
 

实例二

 代码如下 复制代码

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JS上传前预览图片</title>
<script type="text/javascript" language="javascript">
<!--
function PreviewImg(imgFile){ 
    var newPreview = document.getElementById("newPreview");   
    var imgDiv = document.createElement("div");
    document.body.appendChild(imgDiv);
    imgDiv.style.width = "118px";    imgDiv.style.height = "127px";
    imgDiv.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod = scale)";  
    imgDiv.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgFile.value;
    newPreview.appendChild(imgDiv);   
    var showPicUrl = document.getElementById("showPicUrl");
    showPicUrl.innerText=imgFile.value;
    newPreview.style.width = "80px";
    newPreview.style.height = "60px";
}
-->
</script>
    </head>
    <body>    
        <p>兼容IE6、IE7</p>
        <div id="newPreview"></div>
        <div id="showPicUrl"></div>
        <hr />
        <p>
            选择图片:<input type="file" size="20" onchange="javascript:PreviewImg(this);" />
        </p>
    </body>
</html>

可是浏览小图Div会小,浏览大图可能会占据整个页面,我们希望以固定的大小显示所有的图片
可以使用他的scale属性.可是这个属性有个问题,浏览大图时,他会缩小原图,浏览小图时就惨了,他会放大小图,
使小图模糊不清。
我们添加个方法改变这种情况。

 代码如下 复制代码

function setImg(o)
{
var width_img;
var height_img;

o.style.visibility = "visible";
width_img=o.offsetWidth;
height_img=o.offsetHeight;

var width=274;   //预定义宽
var height=100;  //预定义高

var ratW;        //宽的缩小比例
var ratH;        //高的缩小比例
var rat;         //实际使用的缩小比例
if(width_img<width && height_img<height)
{
    //如果比预定义的宽高小,原图显示。
    o.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").sizingMethod = "image";
    return;

   
}else{
    //如果大的化,要把 sizingMethod改成scale 如果属性是image,不管怎么改div的宽高,都不起作用
    o.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").sizingMethod = "scale";

}
ratH=height/height_img;
ratW=width/width_img;
if(ratH<ratW)       //选择最小的作为实际的缩小比例
    rat=ratH;
else
    rat=ratW;
   
width_img=width_img * rat;
height_img=height_img * rat;
o.style.width=width_img;
o.style.height=height_img;
}修改ShowImage方法 function ShowImage(path){
 //处理前是原图,先将其隐藏,
 document.all.divShow.style.visibility = "hidden";
document.all.divShow.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = path;
  document.all.divShow.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").sizingMethod = "image";
//过一小会获取div的宽高.
setTimeout("setImg(document.all.divShow)",100);
}

以上在IE7中测试通过

时间: 2024-10-01 08:48:18

javascript上传前图片预览代码的相关文章

Ajax上传图片及上传前先预览功能实例代码

手头上有几个小项目用到了easyUI,一开始决定使用easyUI就注定了项目整体上前后端分离,基本上所有的请求都采用Ajax来完成.在文件上传的时候用到了Ajax上传文件,以及图片在上传之前的预览效果,解决了这两个小问题,和小伙伴们分享下. 上传之前的预览 方式一 先来说说图片上传之前的预览问题.这里主要采用了HTML5中的FileReader对象来实现,关于FileReader对象,如果小伙伴们不了解,可以查看这篇文章HTML5学习之FileReader接口.我们来看看实现方式: <!DOCT

一次上传多张图片,并且上传前可以预览其缩略图 兼容IE7

问题描述 我想要一个,一次上传多张图片,并且上传前可以预览其缩略图兼容IE7的jquery插件 解决方案 解决方案二:js干不了这事,一般都是flush插件解决方案三:这需要插件.ActiveX.Silverlight.Flash都可以考虑.

jquery实现图片上传前本地预览功能_jquery

本文实例为大家分享了jquery实现图片上传前预览的具体代码,供大家参考,具体内容如下 介绍之前有一个小问题,一直找不到图片预览时,图片不出来的原因,原来在于图片的路径!!!一直写的是图片的本地路径,没有什么用.直接上代码. html部分: 复制代码 代码如下: <img id="pic" src="" > <input id="upload" name="file" accept="image/*

51图片上传前的预览效果

提示:您可以先修改部分代码再运行 提示:您可以先修改部分代码再运行

php图片上传,可实现预览

php教程图片上传,可实现预览 <?php header("content-Type: text/html; charset=gb2312"); $uptypes=array('image/jpg',  //上传文件类型列表  'image/jpeg',  'image/png',  'image/pjpeg',  'image/gif',  'image/bmp',  'application/x-shockwave-flash',  'image/x-png',  'appl

分离与继承的思想实现图片上传后的预览功能:ImageUploadView_javascript技巧

本文要介绍的是网页中常见的图片上传后直接在页面生成小图预览的实现思路,考虑到该功能有一定的适用性,于是把相关的逻辑封装成了一个ImageUploadView组件,实际使用效果可查看下一段的git效果图.在实现这个组件的过程中,有用到前面几篇博客介绍的相关内容,比如继承库class.js,任意组件的事件管理库eventBase.js,同时包含进了自己对职责分离,表现与行为分离这两方面的一些思考,欢迎阅读与交流. 演示效果: 注:由于演示的代码都是静态的,所以文件上传的组件是用setTimeout模

jsp中点击图片弹出文件上传界面及预览功能的实现_JSP编程

花了两天时间琢磨一下图片预览的功能 任务需求如下: 1:jsp页面中有一个图片(pic_1) 2:点击图片弹出类似于资源管理器的界面 3:选择完某一个图片之后在pic_1处预览 我在IE8上试验下面这段代码,可以实现上述功能,没有在别的浏览器中测试,如果各位朋友知道多种浏览器的支持方法,请赐教,共同学习,谢谢. 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http:

图片上传判断及预览脚本的效果实例_javascript技巧

复制代码 代码如下: <div id="imgbox">    <img id="imghead" src="img/no_photo.gif" alt="" width="100" height="125" />    </div><asp:FileUpload ID="FileUploadImg" runat="

Swift 2.0图片上传以及图片客户端压缩代码

Swift 2.0图片上传以及图片客户端压缩是写某一个app中,抽离的,其实比较简单,也没有做很多的IOS内部机制判断,只是实现了图片上传以及图片压缩后上传的功能. // //  ViewController.swift //  uploadImage // //  Created by jincon on 15/11/1. //  Copyright 2015年 jincon. All rights reserved. // import UIKit class ViewController: