网上关于XHR的文章很多，文档也很多。一般使用也没什么问题，最近研究图片上传事遇到跨域问题。这里记录一下。

1
xhr.open("POST", "https://sm.ms/api/upload", false);

第三个参数是 sync，默认true，并且各种文档里面都是推荐true，但是最近在研究上传图片到sm.ms时遇到服务器不支持OPTIONS的问题。尝试了很多方法都搞不定。没办法只能使用sendAsBinary，但是后来发现使用jQuery的ajax可以不发送OPTIONS。我认为肯定是可以不发送的。又经过一番搜索无果。最后突然想到尝试改改async看看，没想到一改还真直接成功了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var file = files[0];
var data = new FormData();
data.append('smfile', file);

var xhr = new XMLHttpRequest();
xhr.open("POST", "https://sm.ms/api/upload", false);
xhr.upload.addEventListener('progress', function(evt) {
	if (evt.lengthComputable) {
			var percent = evt.loaded / evt.total * 100;
			document.getElementById('drag-text').innerHTML = Math.ceil(percent) + '%';
		}
	}, false);
xhr.onreadystatechange = function(){
	if(xhr.readyState == 4 && xhr.status == 200){
		let img = JSON.parse(xhr.responseText).data.url;
	}
}
xhr.send(data);

demo: 文件上传

最初研究这东西的目的是想做一个博客的评论图片上传功能，方便访客评论的时候贴图。
后期希望能做成一个js插件，其他人想要给博客加上这个功能只要引入js就可以。