Facebook新的javascript sdk-用它上传照片！ [英] Facebook new javascript sdk- uploading photos with it!

问题描述

我正在尝试使用此 javascript 代码将照片上传到 Facebook 相册.

I am trying to upload a photo to facebook album with this javaascript code.

FB.api('/me/photos', 'post', {    access_token: GetToken(),
                            name: 'uploaded photo',
                            source: '@http://example.com/example.jpg' }, 
            function(response) {
                if (!response || response.error) {
                    alert('Error occured ' + response.error.message);
                } else {
                    alert('Post Id: ' + response.id);
                }
            });

有人可以帮我处理这段代码吗?此代码未返回任何内容.

Can someone help me with this code. This code is not returning anything.

推荐答案

假设您想在纯 JavaScript/JQuery 中执行此操作 - 您需要使用 iframe 作为表单的目标，有一个警告 - 您由于同源策略，将无法使用返回数据(调用的ID/成功).

Assuming you want to do this in pure JavaScript/JQuery - you'll need to use an iframe as the target of a form, there is a caveat - you will not be able to use the return data (the ID / success of the call) because of the same origin policy.

首先创建一个表单来保存文件输入和您希望设置的任何其他变量:

First create a form that will hold the file input and any other variables you wish to set:

<form id="upload-photo-form">
    <input name="source" id="source" size="27" type="file" />
    <input name="message" id="message" type="text" value="message example please ignore" />
</form>

这是使用的主要函数，它创建一个 iframe，指向表单使用它，然后使用 FQL 从相册中检索最新照片.

Here is the main function used which creates an iframe, points the form to use it, and then retrieves the latest photo from the album using FQL.

function fileUpload(form, action_url, div_id) {
    // Create an iframe 
    var iframe = document.createElement("iframe");
    iframe.setAttribute('id', "upload_iframe");
    iframe.setAttribute('name', "upload_iframe");
    iframe.setAttribute('width', "0px");
    iframe.setAttribute('height', "0px");
    iframe.setAttribute('border', "0");
    iframe.setAttribute('style', "width: 0; height: 0; border: none;");

    // Add to document.
    form.parentNode.appendChild(iframe);
    window.frames['upload_iframe'].name = "upload_iframe";

    iframeId = document.getElementById("upload_iframe");

    // Add event to detect when upload has finished
    var eventHandler = function () {

        if (iframeId.detachEvent)
        {
            iframeId.detachEvent("onload", eventHandler);
        }
        else
        {
            iframeId.removeEventListener("load", eventHandler, false);
        }

        setTimeout(function() {
            try
            {
                $('#upload_iframe').remove();
            } catch (e) {

            }
        }, 100);

        FB.api({
            method: 'fql.query',
            query: 'SELECT src_big,pid,caption,object_id FROM photo WHERE aid= "' + albumID + '" ORDER BY created DESC LIMIT 1'
            },
            function(response) {
                console.log(response);
            }
        );

    }

    if (iframeId.addEventListener)
        iframeId.addEventListener('load', eventHandler, true);
    if (iframeId.attachEvent)
        iframeId.attachEvent('onload', eventHandler);

    // Set properties of form...
    form.setAttribute('target', 'upload_iframe');
    form.setAttribute('action', action_url);
    form.setAttribute('method', 'post');
    form.setAttribute('enctype', 'multipart/form-data');
    form.setAttribute('encoding', 'multipart/form-data');

    // Submit the form...
    form.submit();

}   

在运行时，您大概会知道上一次调用中的专辑对象 ID，并从登录或会话 onauthchange 返回的会话对象中获得访问令牌.

At runtime you will presumably know the albumObjectID from a previous call, and have the access token from the session object that is returned by login or session onauthchange.

var url = 'https://graph.facebook.com/' + albumObjectID + '/photos?access_token=' +  accessToken;
fileUpload($('#upload-photo-form')[0], url, $('#upload-photo-div')[0]);`

显然这不是生产代码，您可以采取一些措施来提高其可靠性(例如检查提交图像的宽度、高度、标题和标签到最新图像).在 & 之前检查最新的图像在尝试上传等之后.

Obviously this isn't production code, there are a few things you can do to improve it's reliability (like checking the width, height, caption & tags of the submitted image to the latest image). Checking the latest image before & after the attempted upload etc.

PS:注意albumObjectID 与albumID，它们是不同的，但是都可以使用一些简单的FQL 查询来获取.(例如:SELECT 辅助、object_id、can_upload、名称 FROM 专辑 WHERE owner = me() AND name = "My Album Name")

PS: Watch out for the albumObjectID vs albumID, they are different however both can be obtained using some simple FQL queries. (eg: SELECT aid, object_id, can_upload, name FROM album WHERE owner = me() AND name = "My Album Name")

希望这会有所帮助.
CameraSchoolDropout

Hope this helps.
CameraSchoolDropout

这篇关于Facebook新的javascript sdk-用它上传照片！的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！