获取文件并显示图片

首先需要一个存放图片的div，放个img标签，基于空白的状态为了美观一些而先给定一张图片，再设定好宽和高就可以固定之后的大小样式了，input标签是放上传之后的图片，它的类型type是file，给input标签一个onchange改变事件再传入图片的参数，它的改变事件既是将选择到的图片显示在img标签那里。打开file表单这里给了一个按钮去实现，绑定了一个点击事件后面也要接一个参数，点击按钮实现选择图片。

这里通过文件获取的接口来获取选择的图片并显示出来，FileReader接口提供了一个异步的API，通过这个API可以从浏览器中异步访问文件系统中的数据。因此，FileReader接口可以读取文件中的数据，并将读取的数据放入到内存中去，选择照片:用FileReader对象来读取本地数据，并且将数据结果赋值给image的src。
//打开file表单，选择图片
function chooseImageFile(inputFileID) {
$("#" + inputFileID).click();
}
//创建FileReader对象
var imgReader = new FileReader();
//正则表达式 过滤图片文件

regexImageFilter = /^(?:image/bmp|image/cis-cod|image/gif|image/ief|image/jpeg|image/jpeg|image/jpeg|image/pipeg|image/png|image/svg+xml|image/tiff|image/x-cmu-raster|image/x-cmx|image/x-icon|image/x-portable-anymap|image/x-portable-bitmap|image/x-portable-graymap|image/x-portable-pixmap|image/x-rgb|image/x-xbitmap|image/x-xpixmap|image/x-xwindowdump)$/i;

//file表单改变事件，将选择的图片显示到img元素
function showImgToView(inputFileId) {
//选择图片文件
var imgFile = $("#" + inputFileId).get(0).files[0];
//判断上传文件是否为图片格式
if (!regexImageFilter.test(imgFile.type)) {
layer.msg(“请选择有效的图片文件”, { icon: 0, title: “提示” });
}
else {
//readAsDataURL()方法可以获取API异步读取的文件数据，另存为数据URL;
//FileReader对象的readAsDataURL方法可以将读取到的文件编码成Data URL。Data URL是一项特殊的技术，可以将资料(例如图片)内嵌在网页之中，不用放到外部文件。
imgReader.readAsDataURL(imgFile);
}
}
//读取文件 onload事件
imgReader.onload = function (evt) {
//将该URL绑定到img标签的src属性上，就可以实现图片的上传预览效果了。
$("#IsImgStudentPicture").attr(“src”, evt.target.result);
};
总结步骤：打开文件选择图片，创建对象，正则表达式过滤图片文件，file表单改变事件，选择图片判断是否为图片格式，成立条件之后就获取到了当前上传的图片数据，读取文件就是onload事件，获取到img的id，将URl绑定到img的src属性上，这就能将图片显示出来。