html5预览上传图片缩略图

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/Lg632/article/details/48523879

//html5预览上传图片(缩略图)

<div class="col-sm-8">
    <input type="file" name="file" class="form-control"  id="zx_img" style="padding: 0px;" placeholder="&nbsp;上传文件">
    <div class="col-sm-8 col-md-4">
        <a href="" class="thumbnail">
            <img id="img_preview" data-src="holder.js/100%x200" alt="图片预览" src="http://image.photophoto.cn/nm-6/018/030/0180300244.jpg" data-holder-rendered="true" style="width: 200px; display: block;">
        </a>
    </div>
</div>

<script>

//上传图片选择文件改变后刷新预览图
$("#zx_img").change(function(e){
    //获取目标文件
    var file = e.target.files||e.dataTransfer.files;
    //如果目标文件存在
    if(file){
        //定义一个文件阅读器
        var reader = new FileReader();
        //文件装载后将其显示在图片预览里
        reader.onload=function(){
            $("#img_preview").attr("src", this.result);
        }
        //装载文件
        reader.readAsDataURL(file[0]);
    }
});

</script>

第二种：

<div class="form-group">
                <label for="file_name" class="col-sm-2 control-label"><span>上传图片:</span></label>
                <div class="col-sm-7">
                    <input class="form-control" type="text" name="file_name" value="{$res['bigpic_file_name']}" id="file_name"
                           placeholder="文件名..." readonly>
                </div>
                <div class="col-sm-1">
                    <input type="file" id="file_upload" name="bigpic" style="display: none" accept="image/png, image/jpeg, image/jpg">
                    <input class="btn btn-primary" id="file_select" type="button" value="上传" style="width: 100%">
                </div>
            </div>
            <div class="form-group">
                <label for="file_preview" class="col-sm-2 control-label"><span>图片预览:</span></label>
                <div class="col-sm-8">
                    <img id="file_preview"  alt="..." class="form-control img-rounded"
                         style="width:300px; height: 200px;     padding: 6px 6px;" src=<if condition="$res['bigpic']">"{$res['bigpic']}"<else />'__PUBLIC__/img/no_image.png'</if>>
                </div>
            </div>

<script>

//点击文件上传按钮
$("#file_select").click(function () {
    //调用文件上传输入组件的单击事件
    $("#file_upload").click();
});


//文件上传发生改变
$("#file_upload").change(function (e) {
    //获取文件名
    var file_name = $("#file_upload").val().match(/[^\\]*$/)[0];
    //显示文件名
    $("#file_name").attr("value", file_name);
    //调用文件名改变事件已触发本栏位验证（修改了bootstrapValidator底层"input":"keyup"-->"change input":"keyup"）
    $("#file_name").change();
    //获取目标文件
    var file = e.target.files || e.dataTransfer.files;
    //如果目标文件存在
    if (file) {
        //定义一个文件阅读器
        var reader = new FileReader();
        //文件装载后将其显示在图片预览里
        reader.onload = function () {
            $("#file_preview").attr("src", this.result);
        }
        //装载文件
        reader.readAsDataURL(file[0]);
    }
});

</script>