javaScript - 表单提交前预览图片其实这东西网上到处都是，但并不完整。正好我也遇到了这个问题，不仅仅是预览，还需要得到图片的属性。于是东凑西凑整理出一个完整的版本，并根据个人的理解加上了一点点说明。
首先做一些准备工作，HTML方面主要是img和input标签的id：
<form> <input type='file' id="imgFile" /> <div id="PReviewDiv"> <img id="previewImg" src="#" alt="your image" /> </div></form>
另外，要为imgFile的change事件设置function：
$(function(){ $('#imgFile').change(function(e){doPreview(this);})});
先从IE开始，IE上还是比较容易的。对于file控件的value会老老实实地获取，而且创建Image对象时只需要指定src属性值就能成功。剩下的就是从Image对象中获得属性了。代码如下：
function doPreview(){ document.getElementById('imgFile').src = input.value; var img = new Image(); img.src = input.value; alert('width:'img.width+'; height:'+img.height);}
当然，我们也可以不用img元素：
function doPreview(){ var previewDiv = document.getElementById("previewDiv"); previewDiv.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = input.value; var img = new Image(); img.src = input.value; previewDiv.style.width = img.width; previewDiv.style.height = img.height; alert('width:'+img.width+'; height:'+img.height);}
如果要使用上面的filter，还需要加上：
<style type="text/CSS">#previewDiv { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);}</style>
但这种方式在Chrome下是行不通的，因为input.value会输出这样的结果：
也就是做了些安全处理，似乎修改浏览器设置就可以，但我们不希望每个人都修改设置。而FileReader对象恰好可以解决这个问题，
我的情况需要用到FileReader的readAsDataURL。readAsDataURL将blob读作一个URL，load事件触发后将结果保存在this.result。试着输出一下返回结果，大概是如下结果，长度几万到几十万不等：
其实这个返回结果可以直接用作img.src的值。剩下的就没有什么难度了。完整代码如下：
$(function(){ $('#imgFile').change(function(e){doPreview(this);})});function doPreview(input) { if (input.files && input.files[0]) { var reader = new FileReader(); var file = input.files[0]; reader.readAsDataURL(file); reader.onload = function (e) { var img = new Image(); img.src = this.result; img.onload = function(){ var w = this.width, h = this.height, t = file.type, n = file.name, s = ~~(file.size/1024) +'KB'; $('#previewDiv').append('<img src="' + this.src +'"> '+w+'x'+h+' '+s+' '+t+' '+n+'<br>'); } }; }else{ var previewDiv = document.getElementById("previewDiv"); previewDiv.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = input.value; //previewDiv.innerHTML = '<img src="'+input.value+'" />' //document.getElementById('previewImg').src = input.value; var img = new Image(); img.src = input.value; previewDiv.style.width = img.width; previewDiv.style.height = img.height; alert('width:'+img.width+'; height:'+img.height); }}