页面上传图片，js如何实现预览效果

diaohuang6952

于 2019-06-26 11:04:00 发布

阅读量128

点赞数

原文链接：http://www.cnblogs.com/zexin/p/11088695.html

版权

最近项目遇到上传图片的时候，通常都会把图片显示出来，这样子可以更加美观，直接贴码。

小案例：

 <div class="info01" id="editimageDiv" style="display: none;">
                                        <img id="editimage" style="height: 180px; width: 250px;">
                                    </div>
<div class="info01">
                                        <div class="re_name re_name_max ">
                                            <span class="tle">封面图片</span> <input type="file"
                                                                                 class="form-control" id="editimgFile"
                                                                                 placeholder="请选择图片"
                                                                                 @change=""
                                                                                 style="height: 32px;width: 49%;"/>
                                            <input
                                                    type="text" class="form-control" id="editimgFile1"
                                                    disabled="disabled" style="display: none;" value=""/>
                                        </div>
                                    </div>

var imgObj = {
        "date": "",
        "name": ""
    };//图片对象
    //选择预览图片
    $("#editimgFile").on("change",
        function (e) {
            var fr = new FileReader();
            var file = this.files[0];
            var _temp = file.name.match(/\.jpg|\.png|\.gif|\.bmp/i);
            if (!_temp) {
                this.value = "";
                alert("目前只支持jpg,png,bmp,gif格式图片文件");
                return false;
            }
            fr.readAsDataURL(file);//读取文件
            fr.onload = function () {
                var base64Data = this.result;//获得base编码字符串格式
                imgObj.name = file.name;//设置文件名
                imgObj.date = base64Data.substring(base64Data
                    .indexOf('jpeg;base64,') + 12);//设置base64数据字符串
                $("#editimage").attr("src", base64Data);//显示图片
                $("#editimageDiv").show();  //图片显示位置，你自己决定
                $("#editimgFile1").val(file.name); //文件名显示位置

            };
        });