Ajax系列之文件上传图片即时预览

---

在我们将图片上传到服务器端以后，服务器端通常都会将图片地址做为响应数据传递到客户端，客户端可以从响应数据中获取图片地址，然后将图片再显示在页面中。

// 监听服务器端响应给客户端的数据
xhr.onload = function () {
	// 如果服务器端返回的http状态码为200
	// 说明请求是成功的
	if (xhr.status == 200) {
		// 将服务器端返回的数据显示在控制台中
		var result = JSON.parse(xhr.responseText);
		// 动态创建img标签
		var img = document.createElement("img");
		// 给图片标签设置src属性
		img.src = result.path;
		// 当图片加载完成以后
		img.onload = function () {
			// 将图片显示在页面中
			box.appendChild(img);
		};
	}
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

图片的路径为返回对象中的 path。

写在最后

如果你感觉文章不咋地//(ㄒoㄒ)//，就在评论处留言，作者继续改进；o_O???
如果你觉得该文章有一点点用处，可以给作者点个赞；\\*^o^*//
如果你想要和作者一起进步，可以微信扫描二维码，关注前端老L；~~~///(^v^)\\\~~~
谢谢各位读者们啦(^_^)∠※！！！