KimhillZhang  

原先直接用javasrcipt实现上传前图片预览,可在IE8里不能实现;前天新来了一个同事(Zendic[http://www.z-endic.info/])他说可以用jquery滤镜来实现,结果真的可以;先下载该.rar文件jquery_Files.rar,里面有两个js文件,一个是jquery的插件,另一个是实现图片预览的js文件;重述一下该功能:当选择一张图片时,判断是否会超出事先定义的宽跟高,如果超出了则提示图片不符合,并清空上传控件里的值;

下载后把两个js文件导入到页面里;

<script language="javascript" src="../javascripts/jquery-1.3.1.js"></script>
<script language="javascript" src="../javascripts/uploadPreview.js"></script>

然后写js代码:

 

<script language="javascript">
        $(document).ready(function() {
            $("#imgfile").uploadPreview({ width: 230, height: 200, imgDiv: "#imgDiv", imgType: ["bmp", "gif", "png", "jpg"], maxwidth: 230, maxheight: 200 });
        });

</script>

在页面上写:

<input name="imgfile" type="file" id="imgfile" runat="server" size="40" />//上传控件

 <div id="imgDiv"></div> //图片预览区

 

在上面的uploadPreview中, width: 230, height: 200表示图片缩放的宽跟高;maxwidth: 230, maxheight: 200 表示允许图片最大的宽跟高;

posted on 2010-05-08 12:51  KimhillZhang  阅读(3689)  评论(2编辑  收藏  举报