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

我对上传到Facebook的图片感到非常疯狂。在通过PHP提交图像之前，我尝试过HTML5拖放方法Dropzone.js，以及上传到自己的服务器。但我唯一能做的就是使用HTML表单，如下所示：

请选择一张照片



说说这张照片：

我在Javascript中动态生成它，并使用

var

来填充

event\u id

和

access\u token

这工作正常，因此我的所有权限和授权都是正确的。现在我要做的是处理响应，因为当用户单击

submit

并显示显示帖子id等基本文本时，浏览器会按照您的预期运行

因此，我创建了一个按钮并将以下内容绑定到它的

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）需要上传文件。

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

我建议您使用捕获这两个连接，使用XMLHttpRequest和不使用XMLHttpRequest，并查看这两个请求之间的实际差异，我实际上不知道XHR.send（fd）是什么有，但它可能是自己发送表单内容，而不是提交表单

---

如果您愿意使用jquery和

请选择一张照片



说说这张照片：





//将图像与消息一起上载的javascript
//把它放在一个按钮，而不是提交按钮
$（“#上传表单”）.ajaxForm({
完成：功能（数据）{
//处理fb响应
}
}); 

谢谢，我会试一试。我从来没有机会尝试小提琴，但你几乎可以肯定，当我的按钮代码被点击时，实际发生的事情是正确的。谢谢Wayne，对迟来的回复表示歉意。我会尽快尝试你的建议。这就是韦恩！第一次工作。

<!-- 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
    }
});