html给页面上传添加图片不显示,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',//获取到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]); //转成可以在本地预览的格式

总结

如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。

小编个人微信号 jb51ccc

喜欢与人分享编程技术与工作经验，欢迎加入编程之家官方交流群！