实时预览上传图片(QQ上传头像前的预览)

上传到服务器之前的本地预览，提高响应速度，用户交互友好

<div id="preview"></div>
<input type="file" onchange="preview(this)" />

function preview(file) {
     var prevDiv = document.getElementById('preview');
     if (file.files && file.files[0]) { /*chrome/opera/firefox/ie10+*/
         var reader = new FileReader();
         reader.onload = function(evt) {
             /*evt.target.result-> base64编码，可以去console查看*/
            prevDiv.innerHTML = '<img src="' + evt.target.result + '" />';
         }
         reader.readAsDataURL(file.files[0]);
     } else { //ie6~ie9使用滤镜功能
         prevDiv.innerHTML = '<div class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + file.value + '\'"></div>';
     }
}

预览的效果===：

AlphaImageLoader：在元素的背景和内容之间插入一张图片，并提供对此图片的剪切和改变尺寸的操作。如果载入的是PNG格式，则0%-100%的透明度也被提供。
语法格式：
filter : progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=bEnabled , sizingMethod=sSize , src=sURL )
enabled：可选项，布尔值(Boolean)。设置或检索滤镜是否激活。 true：默认值。滤镜激活。 false：滤镜被禁止。
sizingMethod：可选项。字符串(String)。设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。
1）crop：剪切图片以适应对象尺寸。
2）image：默认值。增大或减小对象的尺寸边界以适应图片的尺寸。
3）scale：缩放图片以适应对象的尺寸边界。
src：必选项。字符串(String)。使用绝对或相对 url 地址指定背景图像。假如忽略此参数，滤镜将不会作用。

传送门：
熊大黑吖
你说你心向远方