要实现图片上传预览功能，在上传到服务器之前，可以先预览一下待上传图片，然后决定是否上传。
原理很简单，就三行javascript代码：
var imageFile = document.getElementById('upload').files[0];//从file控件获取file对象
var src = window.URL.createObjectURL(imageFile);//根据file对象解析出图片资源url地址
document.getElementById('preview').src = src;//将解析出的url赋给img的src，该src为blob类型
核心知识点见如下：
插件使用很简单，引入插件js就可以。说一下原理，原理清楚，插件不插件也就没关系了。
示例如下（注：为了简便，引入了jquery,找一份jquery文件放在该测试html文件相同目录下即可）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> new document </title>
<meta name="generator" content="editplus" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
</head>
<script type="text/javascript" src="./jquery.js"></script>
<body>
<input id="upload" type="file" >
<img id="preview">
</body>
<script type="text/javascript">
$('#upload').change(function(){
var imageFile = document.getElementById('upload').files[0];//image file对象
var src = window.URL.createObjectURL(imageFile);//获取图片地址
//alert(src);
document.getElementById('preview').src = src;//为图片src赋值
});
</script>
</html>原理很简单，就三行javascript代码：
var imageFile = document.getElementById('upload').files[0];//从file控件获取file对象
var src = window.URL.createObjectURL(imageFile);//根据file对象解析出图片资源url地址
document.getElementById('preview').src = src;//将解析出的url赋给img的src，该src为blob类型
核心知识点见如下：
https://developer.mozilla.org/zh-CN/docs/Web/API/URL/createObjectURL
如有错误，欢迎指正
end