上传图片即时显示图片

方法一：

使用URL.createObjectURL()方法:

var imgPath = document.getElementById("imgPath");//上传图片的id
var stuImg = document.getElementById("stuImg");//显示图片的id

//URL对象是硬盘（SD卡等）指向文件的一个路径，获得一个http格式的url路径
var path=window.URL.createObjectURL(imgPath.files.item(0));//数据格式为blob二进制数据
//把新的url给预留好的图片标签
stuImg.src=path;
// document.images[0].src=path;//document.images文档所有图片集合
//地址清空
stuImg.onload = function(){
    window.URL.revokeObjectURL(path);
};

方法二：

使用FileReader()方法：

var imgPath = document.getElementById("imgPath");//上传图片的id

//判断是否支持FileReader
if (window.FileReader) {
    var reader = new FileReader();
} else {
    alert("您的设备不支持图片预览功能，如需该功能请升级您的设备！");
}

//获取文件
var file = imgPath.files[0];

//图片类型的正则表达式
var imageType = /^image//;

//是否是图片
if (!imageType.test(file.type)) {
    alert("请选择图片！");
    return;
}

reader.readAsDataURL(file);//将文件读取为DataURL

//读取完成
reader.onload = function(e) {
    //获取图片dom
    var img = document.getElementById("stuImg");
    //图片路径设置为读取的图片
    img.src = e.target.result;
};