JS实现页面图片上传预览

页面上传图片时通常是通过input[file]这种方式上传到服务器,后端PHP通过$_FILES和move_uploaded_file()来接收图片并保存到指定位置,然后返回存储链接保存到数据库。这样再次刷新页面之后才能在前端页面上预览图片的效果。其实可以通过js来提前预览或者ajax来实现异步上传。

方法如下:

1、创建一个input,type类型为file,绑定一个onchange函数(即当值发生变化时开始执行这个函数)。代码如下:

<input type="file" id="img" onchange="changepic(this)" accept="image/jpg,image/jpeg,image/png,image/PNG">

 

JS实现页面图片上传预览
JS实现页面图片上传预览

 

2、changepic函数中声明FileReader(),获取上传的图片并转换成URL形式,并赋值到img标签中展示。js代码如下:

function changepic() {
	var fileImage = new FileReader();
	f = document.getElementById('img').files[0];
	fileImage.readAsDataURL(f);
	fileImage.onload = function(e) {
		document.getElementById('img3').src = this.result;
	};
}

 

注释:

fileImage.readAsDataURL(f); //读取指定的 Blob 或 File 对象。读取操作完成的时候,readyState 会变成已完成DONE,并触发 loadend 事件,同时 result 属性将包含一个data:URL格式的字符串(base64编码)以表示所读取文件的内容。

fileImage.onload函数中this.result;既是所获取的data:url格式的字符串。

至于ajax异步上传图片也是同样的原理,通过post方法传输字符串给PHP后端。后端接收后直接保存到数据库即可

本文地址:https://www.dreamcs6.com/2019-12-12-663.html

Author: 智宇愚

发表评论

电子邮件地址不会被公开。 必填项已用*标注