html5预览上传图片缩略图

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

<div class="col-sm-8">
<input type="file" name="file" class="form-control"  id="zx_img" style="padding: 0px;" placeholder=" 上传文件">
<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>