【发布时间】：2012-10-30 20:05:48
【问题描述】：
我正在尝试使用 YouTube API 执行基于浏览器的上传，但也使用 Ajax 来显示进度条。
我从这里开始： https://developers.google.com/youtube/2.0/developers_guide_protocol_browser_based_uploading
如果我只使用基本的 HTML 表单帖子，它可以 100% 工作。
<form id="frmYouTube" enctype="multipart/form-data" method="post" action="https://uploads.gdata.youtube.com/action/FormDataUpload/YOUTUBE_URL_HERE?nexturl=https%3a%2f%2fdomain%2fpageafter%2fVideoUploadDone%3fid2%3dLOCAL_ID">
<table>
<tr>
<td><input type="file" name="file" /></td>
</tr>
<tr>
<td>
<input type="hidden" name="token" value="YOUTUBE_TOKEN_HERE" />
<input type="submit" value="Upload" />
</td>
</tr>
</table>
</form>
但是，如果我尝试添加一些 Javascript，我会遇到问题。我还包括 MooTools 和来自 http://mootools.net/forge/p/form_upload 的 Request.File 类。
这是代码的简化版本：
var yt = $('frmYouTube');
var ytDone = function () {
// Code to display: 'Video upload complete. Return to <a href="/Acount">your account</a>.';
};
var ytProgress = function (event, xhr) {
var loaded = event.loaded, total = event.total;
// Code to display: 'Uploading... ' + (parseInt(loaded / total * 100, 10)) + '%';
};
yt.addEvents({ 'submit': function (ev) {
ev.stop();
var rf = new Request.File({
url: yt.get('action'),
onProgress: ytProgress,
onFailure: function (xhr) {
ytError('Upload Failed (1).');
},
onCancel: function () {
ytError('Upload Canceled.');
},
onException: function () {
ytError('Upload Failed (2).');
},
onSuccess: ytDone
});
yt.getElements('input').each(function (field) {
if (field.files) {
rf.append(field.get('name'), field.files[0]);
} else {
rf.append(field.get('name'), field.get('value'));
}
});
rf.send();
}
});
</script>
此时文件已成功上传，YouTube 将 302 重定向返回到我的“nexturl”，但由于跨域规则未遵循重定向，我无法使用 Javascript 访问位置标头。
我见过一些涉及 iframe 的解决方案，但如果您想要一个进度条，那将无法正常工作。有没有人想出一种变通方法来将基于浏览器的内容上传到 YouTube 并显示进度条。
【问题讨论】：
-
YouTube 已设置 CORS 并使用其 API (gdata-samples.googlecode.com/svn/trunk/gdata/…)，因此理论上是可行的。我正在寻找一个选项来直接返回结果，而不是通过 302 重定向将其附加到 nexturl 中。或者，如果有其他跨域标头或协议允许 Ajax 跨域重定向，甚至只是以编程方式访问“Location”标头。
标签： ajax mootools youtube-api