图片上传本地预览。兼容IE。

html

<input onchange="PreviewImage(this)" type="file">
01.

js

function PreviewImage(obj) {
    var _divNewPreview = document.getElementById('divNewPreview');
    var allowExtention = ".jpg,.bmp,.gif,.png,.jpeg";
    //,允许上传文件的后缀名
    var extention = obj.value.substring(obj.value.lastIndexOf(".") + 1).toLowerCase();
    var browserVersion = window.navigator.userAgent.toUpperCase();
    if (allowExtention.indexOf(extention) > -1) {
        //判断是否是IE浏览器
        if ( obj.files ) {
            //兼容HTML5获取路径
            if ( typeof FileReader !== "undefined") {
                for(var i = 0;i < obj.files.length;i++){  
                    var file = obj.files[i]; 
                    var reader = new FileReader();
                    reader.readAsDataURL(obj.files[i]);
                    reader.onload = function(e) {
                        //添加图片
                        _divNewPreview.insertAdjacentHTML("beforeend", '<div class="imgBox"><img src="'+this.result+'" alt=""> </div>');
                    };
                };
            };
        }else{
            //添加图片
            obj.select();  
            obj.blur();  
            _divNewPreview.insertAdjacentHTML("beforeend", '<div class="imgBox"></div>');
            _divNewPreview.lastChild.style.filter = " progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
            _divNewPreview.lastChild.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = document.selection.createRange().text; 
        };
    } else {
        alert("仅支持jpg,bmp,gif,png为后缀名的文件!");
        obj.value = "";
    };
};
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.

下面是演示效果：