关于在js加载预览图片问题

在JS中加载预览图片有多种：

1、选择图片，上传服务器，进行图片回显；

2、采用js将图片加载为base64编码进行回显；

3、JS加载本地图片（本文介绍这种）；

这种图片预览比较简单，大家一看就懂，直接上代码吧。

html

<div class="form-group">
    <label class="col-sm-3 control-label">主配图：</label>
    <div class="col-sm-8 no-padding">
        <input id="imgFile" type="file" name="picFile" />
        <!--<button class="btn btn-main"><span class="glyphicon glyphicon-plus"></span></button>-->
    </div>
</div>

<div class="form-group" id="previewDiv" style="display: none">
    <label class="col-sm-3 control-label"></label>
    <div class="col-sm-8 col-md-5">
        <div class="thumbnail">
            <img id="previeImg" src="" alt="">
        </div>
    </div>
</div>

JS

//文件选择判断
$("#imgFile").change(function(){
    var fileObj = this.files[0];
    //判断是否是图片文件
    if(fileObj.type.indexOf("image/") < 0) {
        $("#previewDiv").hide();
        $scope.infoFlag = "请选择图片文件（jpg|gif|png）!";
        layer.alert("请选择图片文件（jpg|gif|png）!");
        return;
    }
    //判断文件大小
    if((fileObj.size/2014/1024) > 2){
        $("#previewDiv").hide();
        $scope.infoFlag = "文件选择过大，请选择2M以内文件！";
        layer.alert("文件选择过大，请选择2M以内文件！");
        return;
    }
    var objUrl = $scope.getObjectURL(this.files[0]) ;
    if (objUrl) {
        $("#previeImg").attr("src", objUrl) ;
    }
}) ;

//图片预览
$scope.getObjectURL = function(file){
    $scope.infoFlag = "";
    $("#previewDiv").show();
    var url = null ;
    if (window.createObjectURL!=undefined) { // basic
        url = window.createObjectURL(file) ;
    } else if (window.URL!=undefined) { // mozilla(firefox)
        url = window.URL.createObjectURL(file) ;
    } else if (window.webkitURL!=undefined) { // webkit or chrome
        url = window.webkitURL.createObjectURL(file) ;
    }
    return url ;
};

效果如下：