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);

    }

}