html5预览上传图片缩略图

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