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

来源：互联网发布：linux如何打开mysql 编辑：程序博客网时间：2024/06/10 07:43

在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>

//文件选择判断$("#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 ;};

效果如下：

0 0