JavaScript - 表单提交前预览图片属性

即Preview image and its properties before upload

其实这东西网上到处都是，但并不完整。

正好我也遇到了这个问题，不仅仅是预览，还需要得到图片的属性。

于是东凑西凑整理出一个完整的版本，并根据个人的理解加上了一点点说明。

（ps：感谢爆栈^^）

首先做一些准备工作，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对象恰好可以解决这个问题，

（ps：关于FileReader的说明，传送门-->http://www.javascripture.com/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="‘+ "http://blog.51cto.com/viewpic.php?refimg=" + 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);

    }

}

JavaScript - 表单提交前预览图片属性