以下采用原生的方式上传图片,如有更高需求,可以采用lrz插件本地上传压缩图片,具体可参考以下路径
http://www.jq22.com/jquery-info3419(感谢)
<body>
<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;">
<button type="button">点击上传</button>
</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>
</body>