HTML中通过js对File组件进行图片预览

<script type="text/javascript">
//判断浏览器是否支持FileReader接口
if (typeof FileReader == 'undefined') {
document.getElementById("xmTanDiv").InnerHTML = "<h1>当前浏览器不支持FileReader接口</h1>";
//使选择控件不可操作
document.getElementById("xdaTanFileImg").setAttribute("disabled", "disabled");
}
//选择图片，马上预览
function xmTanUploadImg(obj) {
var file = obj.files[0];

console.log(obj);console.log(file);
console.log("file.size = " + file.size);  //file.size 单位为byte

var reader = new FileReader();

//读取文件过程方法
reader.onloadstart = function (e) {
console.log("开始读取....");
}
reader.onprogress = function (e) {
console.log("正在读取中....");
}
reader.onabort = function (e) {
console.log("中断读取....");
}
reader.onerror = function (e) {
console.log("读取异常....");
}
reader.onload = function (e) {
console.log("成功读取....");

var img = document.getElementById("xmTanImg");
img.style.height="150px";
img.style.width="150px";
img.src = e.target.result;
//或者 img.src = this.result;  //e.target == this
}
reader.readAsDataURL(file)
}
</script>

二 通过jQuery实现

<!--  导入jQuery库-->
<script src="${pageCountext.request.contextPath}/js/jquery.js"></script>

<script type="text/javascript">
$("#file0").change(function(){
var objUrl = getObjectURL(this.files[0]) ;
console.log("objUrl = "+objUrl) ;
if (objUrl) {
$("#xmTanImg").attr("src", objUrl) ;
}
}) ;
//建立一個可存取到該file的url
function getObjectURL(file) {
var url = null ;
if (window.createObjectURL!=undefined) { // basic
url = window.createObjectURL(file) ;
} else if (window.URL!=undefined) { // mozilla(firefox)
url = window.URL.createObjectURL(file) ;
} else if (window.webkitURL!=undefined) { // webkit or chrome
url = window.webkitURL.createObjectURL(file) ;
}
return url ;
}
</script>

<div class="form-group">
<div class="label">
<label>图片：</label>
</div>
<div class="field">
<input type="file" id="file0" class="input w50" name="upload" onchange="xmTanUploadImg(this)"  accept="image/"/>
<div class="tips"><font size="5">预览</font></div>
<img src="" id="xmTanImg" >
</div>
</div>