JavaScript实现图片上传前本地预览与验证

图片上传本地预览功能概述

图片上传预览功能旨在用户提交前展示图片效果，当前常见实现方式包括原生JavaScript、jQuery及Flash，其中JavaScript因兼容性和性能优势成为主流选择。

核心实现原理与对象解析

实现原理

该功能主要包含两个步骤：首先，当用户触发文件输入框并选择本地图片后，程序需获取该图片文件的对象URL；其次，将此对象URL赋值给预先定义的img标签的src属性，即可在页面上直接显示预览图片。

在此过程中，需要深入理解JavaScript中的File对象、Blob对象以及window.URL.createObjectURL()方法的作用机制。

File对象详解

File对象用于获取文件元数据及读取文件内容。通常情况下，File对象来源于用户在input元素上选择文件后返回的FileList集合，也可由拖放操作生成的DataTransfer对象产生。以下代码展示了如何获取FileList对象：

<script type="text/javascript" src="jquery.js"></script>
<input id="upload" type="file">
<img id="preview" src="">
<script type="text/javascript">
$('#upload').change(function(){
// 获取FileList的第一个元素
alert(document.getelementbyid('upload').files[0]);
});
</script>

Blob对象解析

Blob对象包含只读的原始二进制数据，其数据形式不限于JavaScript原生类型。File接口基于Blob构建，并扩展支持了本地文件操作。由于File接口继承自Blob，我们可以通过Blob对象获取所需的对象URL。具体转换代码如下：

<script type="text/javascript">
var f = document.getelementbyid('upload').files[0];
var src = window.URL.createObjectURL(f);
document.getElementById('preview').src = src;
</script>

浏览器兼容性处理方案

浏览器兼容性说明

上述标准方法主要适用于Chrome等现代浏览器。对于IE浏览器，可直接通过input的value属性替代src属性实现预览。此外，早期资料中提到的File对象getAsDataURL()方法已废弃，类似的getAsText()和getAsBinary()方法也已不再推荐使用。以下代码展示了针对IE和Firefox的旧版兼容处理逻辑：

function getFullPath(obj) { //得到图片的完整路径
if (obj) {
//ie
if (window.navigator.userAgent.indexOf("MSIE") >= 1) {
obj.select();
return document.selection.createRange().text;
}  
//firefox
else if (window.navigator.userAgent.indexOf("Firefox") >= 1) {
if (obj.files) {
return obj.files.item(0).getAsDataURL();
    }  
return obj.value;
}  
return obj.value;
    }  
}

文件格式、比例与大小验证

该段代码用于获取客户端图片的完整路径。在此基础上，我们可以进一步限制上传文件的大小和格式。

$("#loadFile").change(function () {
var strSrc = $("#loadFile").val();
img = new Image();
img.src = getFullPath(strSrc);
//验证上传文件格式是否正确
var pos = strSrc.lastIndexOf(".");
var lastname = strSrc.substring(pos, strSrc.length)
if (lastname.toLowerCase() != ".jpg") {
alert("您上传的文件类型为" + lastname + "，图片必须为 JPG 类型");
return false;
}  
//验证上传文件宽高比例
if (img.height / img.width > 1.5 || img.height / img.width < 1.25) {
alert("您上传的图片比例超出范围，宽高比应介于1.25-1.5");
return;
}  
//验证上传文件是否超出了大小
if (img.fileSize / 1024 > 150) {
alert("您上传的文件大小超出了150K限制！");
return false;
} 

其中，loadFile是HTML中input file元素的id。在change事件触发（即用户选择文件）后，需将图片显示在预览框中。在上述代码末尾添加以下代码即可实现：

$("#stuPic").attr("src", getFullPath(this));

jQuery完整示例代码

既然使用了jQuery，下面再分享一个完整的jQuery实现示例：

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery.js"></script>
<script language="javascript">
$(function(){
var ei = $("#large");
ei.hide();
$("#img1").mousemove(function(e){
ei.css({top:e.pageY,left:e.pageX}).html('<img style="border:1px solid gray;" src="' + this.src + '" />').show();
}).mouseout( function(){
ei.hide("slow");
        })
$("#f1").change(function(){
$("#img1").attr("src","file:///"+$("#f1").val());
        })
 });
</script>
<style type="text/css">
#large{position:absolute;display:none;z-index:999;}
</style>
</head>
<body>
<form name="form1" id="form1">
<div id="demo">
<input id="f1" name="f1" type="file" />
<img id="img1" width="60" height="60">
</div>
<div id="large"></div>
</form>
</body>
</html>