javascript - 使用 Javascript 和 HTML 表单向 Facebook 提交图像

Question

我对将图像上传到 Facebook 感到非常着迷。我尝试过 HTML5 拖放方法、Dropzone.js，以及在通过 PHP 提交图像之前上传到我自己的服务器。但我唯一可以做的工作(因为我缺乏经验，我承认)并且不涉及将图像上传到我自己的服务器，就是使用 HTML 表单，如 Facebook documentation 中所示。 :

<form id=“upload_form” enctype="multipart/form-data" action=“https://graph.facebook.com/event_id/photos?access_token=an_access_token” method="POST">
Please choose a photo
<input name="source" type="file"><br/><br/>
Say something about this photo:
<input name="message" type="text" value=""><br/><br/>
<input type="submit" value="Upload"/><br/>
</form>

我在 Javascript 中动态生成它并使用 var填写event_id和access_token .

这工作正常，所以我的所有权限和授权都是正确的。现在我想做的是处理响应，因为当用户单击 submit 时浏览器会按照您的预期执行操作并显示显示帖子 ID 等内容的基本文本。

因此，我创建了一个按钮并将以下内容绑定(bind)到它的 click事件:

var fd = document.getElementById('upload_form');
if (fd) {
  console.log('Sending');
  var XHR = new XMLHttpRequest();
  XHR.addEventListener('load', function(data) {
   console.log('XHR finished:');
   console.log(data);
 });

 XHR.addEventListener('error', function(data) {
  console.log('XHR ERROR:');
  console.log(data);
 });

 var graph_url = 'https://graph.facebook.com/'+event_id+'/photos?access_token=' + access_token;
 XHR.open('POST', graph_url);
 XHR.send(fd);
}

一旦用户选择了图像并单击我的按钮即可执行上述XHR完成发送并报告已完成，但 Facebook 回复如下:

(#324)Requires upload file.

请有人告诉我哪里出了问题 - 这已经是一个问题好几天了!

Answer 1

如果你愿意使用jquery和jquery.ajaxForm plugin

<!-- You form code stay Make sure your form.action url is valid ajaxForm use that as url -->

<form id=“upload_form” enctype="multipart/form-data" action=“https://graph.facebook.com/event_id/photos?access_token=an_access_token” method="POST">
Please choose a photo
<input name="source" type="file"><br/><br/>
Say something about this photo: 
<input name="message" type="text" value=""><br/><br/>
<input type="submit" value="Upload"/><br/>
</form>


//your javascript to upload the image togather with message
// put this in a button, not submit button
$('#upload_form').ajaxForm({
    complete: function(data) {
        //process fb response
    }
});