html上传图片后,在页面显示上传的图片
1、html
2、js$('#chooseImage').on('change',function(){
var filePath = $(this).val(), //获取到input的value,里面是文件的路径
fileFormat = filePath.substring(filePath.lastIndexOf(".")).toLowerCase();
// 检查是否是图片
if( !fileFormat.match(/.png|.jpg|.jpeg/) ) {
error_prompt_alert('上传错误,文件格式必须为:png/jpg/jpeg');
return;
}
$('#cropedBigImg').attr('src',filePath);
$('#loding').show();
});
本意是想当type=file的input的value改变的时候,得到图片路径,然后将路径赋给img的src,但是这样的路径是不支持在本地显示的。
3、修改可以在本地显示上传的图片的js$('#chooseImage').on('change',function(){
var filePath = $(this).val(), //获取到input的value,里面是文件的路径
fileFormat = filePath.substring(filePath.lastIndexOf(".")).toLowerCase(),
src = window.URL.createObjectURL(this.files[0]); //转成可以在本地预览的格式
// 检查是否是图片
if( !fileFormat.match(/.png|.jpg|.jpeg/) ) {
error_prompt_alert('上传错误,文件格式必须为:png/jpg/jpeg');
return;
}
$('#cropedBigImg').attr('src',src);
});只需要添加下面这句代码,就可以在浏览器上显示本地上传的图片了src = window.URL.createObjectURL(this.files[0]); //转成可以在本地预览的格式