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

[hard2reg]

学习 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 已经变成了最后一个文件名。
我知道这是一个新手很容易掉的坑，但我不知道该怎么解决。。。

[hard2reg]

@Livid 求删帖，不小心把 Post 地址贴上来了。。。

[hard2reg]

不用了。。还可以 edit。。。

[hard2reg]

php 开头已设置 Access-Control-Allow-Origin： *

[leonlu]

如果跨域了，chrome 是会先发个 options 问问能不能跨域的

[hard2reg]

@leonlu 是的，我先前不知道跨区域要 options，现在这个问题解决了。新的问题是。。xhr 中的 file.name 不正确。。如果我上传文件 a.jpg b.jpg c.jpg ，最后的输出结果都是 a.jpg uploaded xxx/xxxxx。

[Kokororin]

append 的第三个参数就是 filename

[hard2reg]

@Kokororin 不是服务端返回同样的文件名。我 js 中有调试输出，xhr:后面的 file.name 受循环影响啦。

[Kokororin]

@hard2reg #7 把 ajax 的代码放在一个闭包里，file.name 作为参数就可以了

[Kokororin]

@hard2reg #7 或者 for (let file of files)

[hard2reg]

@Kokororin let file of files? 还能这么写啊

[hard2reg]

@Kokororin 看了 Mozilla 的文档了解了一下 let，好像闭包传参的兼容性和可读性更好？

[Kokororin]

@hard2reg #11 http://caniuse.com/#search=let 可读性难道不是 let 更好吗，兼容性不是问题，过一下 babel

[hard2reg]

@Kokororin 哦哦，谢谢了。我在想想

[hard2reg]

@Kokororin 试了下文件名正常输出了，十分感谢！
```
jqXHR.upload.addEventListener("progress", function(ev) {
console.log(`ev.total ${ev.total} Size ${file.size}`);
});
```
输出结果显示：ev.total 获取到的字节数比 file.size 获取到的大一些，正常吗？