type = 'flie' 图片本地上传预览

实际中我们一般会把 input 隐藏 label 的 for = input的 id 然后给label设置样式。

 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 = "";
    };
};

选取呈现在页面的图片貌似是 base64；