JQuery实现input上传图片显示缩略图

首先 HTML ：

< div >

< input type = " file " name = " file " class = " form-control " id= " zx_img " style = " padding: 0px; "

placeholder = "   上传文件 " >

< div >

< img id= " img_preview " data-src = "" src = "" data-holder-rendered = " true "

style = " width: 100px; display: block; " >

div >

div >

JQuery ：

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

大家可以去试试啦！ 你祝你们好运