JavaScript 实现图片上传预览功能

JavaScript 实现图片上传预览功能

本文详细介绍如何利用JavaScript实现图片上传前的本地预览功能，供开发者参考。

定义预览函数 PreviewImage(imgFile)
{
获取文件扩展名：从文件路径中提取最后一个点之后的字符串，即 filextension = imgFile.value.substring(imgFile.value.lastIndexOf("."), imgFile.value.length);
将扩展名转换为小写：filextension = filextension.toLowerCase();
if ((filextension!='.jpg')&&(filextension!='.gif')&&(filextension!='.jpeg')&&(filextension!='.png')&&(filextension!='.bmp'))
    {
则弹出提示：“对不起，系统仅支持标准格式的照片，请您调整格式后重新上传，谢谢 !”，
并将焦点返回至文件选择框：imgFile.focus();
    }
否则（即格式合法），
    {
定义变量 path 用于存储图片路径。
根据浏览器类型处理预览：
若为IE浏览器（document.all）：
调用 imgFile.select()；
获取选中范围文本：path = document.selection.createRange().text；
清空预览区域：document.getElementById("imgPreview").innerHTML=""；
应用滤镜实现预览：document.getElementById("imgPreview").style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src=\"" + path + "\")"；
若为Firefox等非IE浏览器：
获取文件数据URL：path = imgFile.files[0].getAsDataURL()；
插入图片元素：document.getElementById("imgPreview").innerHTML = "<img id='img1' width='120px' height='100px' src='"+path+"'/>"；

HTML调用方式如下：

添加文件上传控件：<input type="file" name="file"
设置样式及事件：style="width: 200px; height: 20px;" onchange="PreviewImage(this)" id="upload" />
添加预览区域：<div id="imgPreview" style="width:120px; height:100px;margin-left: 280px;">
</div>

运行效果如图所示：

希望本文所述对大家的javascript程序设计有所帮助。