addEventListener 获取上传进度结果请求方式从 Post 变 Options 了？

学习 js 中，不知道怎么改，google 也查不到相关的。。。多谢

$(function() {
	$("body").bind("dragover", function(ev) {
		ev.preventDefault();
		//console.log("dragover event was prevented");
	});
	$("body").bind("drop", function(ev) {
		ev.preventDefault();
		//console.log("drop event was prevented");
		var files = ev.originalEvent.dataTransfer.files;
		//console.log(files);
		for (file of files) {
			//console.log(`${file.name}  ${file.size} bytes`);
			if (!file.size) {
				console.log(`error: ${file.name} is an empty file`);
				continue;
			}
			if (file.type.indexOf("image") == -1) {
				console.log(`error: ${file.name} is a non-image file`);
				continue;
			}
			var fd = new FormData();
			fd.append("pic", file);
			//console.log(`uploading ${file.name} ...`);
			$.ajax({
				url: "https://xxxx.com/upload.php", 
				type: "POST", 
				data: fd, 
				processData: false, 
				contentType: false, 
				success: function(res) {
					console.log(res);
				}, 
				error: function(jqXHR) {
					console.log(jqXHR.responseText);
				}, 
				xhr: function() {
					myXHR = $.ajaxSettings.xhr();
					myXHR.upload.addEventListener("progress", function(e) {
						console.log(`${file.name}  uploaded ${e.loaded}`);
					});
					return myXHR;
				}
			});
		}
	});
});

找到错误了。。在 php 文件上，if 只有一个否则就 403 所以 Options 请求失败。 标题所述问题已解决

新的问题是。。每次输出的 file.name 总是最后一个循环中的文件名，不和每次上传的文件名对应。
如果我上传文件 a.jpg b.jpg c.jpg ，最后的输出结果都是 a.jpg uploaded xxx/xxxxx。
因为 ajax 是异步的，而 file.name 在循环中会改变，当异步请求完成回调后 file.name 已经变成了最后一个文件名。
我知道这是一个新手很容易掉的坑，但我不知道该怎么解决。。。 ----------------------- 以下是精选回复-----------------------

答:不用了。。还可以 edit。。。
答:php 开头已设置 Access-Control-Allow-Origin： *
答:如果跨域了，chrome 是会先发个 options 问问能不能跨域的
答:append 的第三个参数就是 filename