我已经构建了一个需要一些图像上传功能的 Facebook 应用程序,并使用 Fine Uploader 来实现它。
Facebook 应用程序本身是用 WordPress 构建的,一切正常。最终,WordPress 网站(即应用程序)将以 iframe 的形式出现在 Facebook 上,而事情就在这里变得有趣起来。
当我在本地机器上测试应用程序时,它可以工作(所有浏览器)。当我在暂存环境中的 iframe 之外测试应用程序时,它也可以工作(所有浏览器)。但是,当我在 Facebook (iframe) 上的测试页面中测试应用程序时,图像上传失败,仅在 IE 中。
作为参考,我将展示我的服务器和客户端代码:
public static function upload_receiver()
{
$uploader = new qqFileUploader();
$uploader->allowedExtensions = array("jpg", "jpeg");
$uploader->sizeLimit = 2024 * 1024;
$wp_upload_dir = wp_upload_dir();
$wp_upload_url = $wp_upload_dir['baseurl'];
$wp_upload_base = $wp_upload_dir['basedir'];
$upload_dir = $wp_upload_base;
$upload_filename = md5(mt_rand())/*.'_'.$uploader->getName()*/.".jpg";
$result = $uploader->handleUpload( $upload_dir, $upload_filename );
// Create the WordPress image thumbs.
$img_target = "{$upload_dir}/{$upload_filename}";
$wp_filetype = wp_check_filetype( $img_target );
$attachment_data = array(
'post_mime_type' => $wp_filetype['type'],
'guid' => $img_target,
'post_title' => preg_replace('/\.[^.]+$/', '', $upload_filename ),
'post_name' => preg_replace('/\.[^.]+$/', '', $upload_filename ),
'post_content' => '',
'post_status' => 'inherit',
);
$attachment_id = wp_insert_attachment( $attachment_data, $img_target );
$meta = wp_generate_attachment_metadata($attachment_id, $img_target);
wp_update_attachment_metadata($attachment_id, $meta);
$result['attachmentId'] = $attachment_id;
$result['imageUrl'] = htmlspecialchars( get_image_url_from_attachment_id($attachment_id, "thumb-small") );
header("Content-Type: text/plain");
echo json_encode( $result );
die();
}
和客户:
var el = $('#upload');
var el_img = el.find('span');
el.fineUploader( {
uploaderType: 'basic',
button: el,
multiple: false,
request: {
endpoint: '<?php echo site_url("/wp-admin/admin-ajax.php") ?>',
params: {
action: 'upload_receiver'
}
},
validation: {
allowedExtensions: ['jpeg', 'jpg']
},
debug: false
} ).on('upload', function(event, id, fileName, response) {
$('.loader').show();
$('.upload_button_container').hide();
} ).on('complete', function(event, id, fileName, response) {
// ONLY IN IE "RESPONSE.SUCCESS" IS FALSE IN AN FB IFRAME. ALL OTHER
// TIMES "RESPONSE.SUCCESS" IS TRUE AND ALL PROPERTIES CREATED ON THE
// SERVER EXIST.
$('.loader').hide();
$('.upload_button_container').show();
if( response.error )
{
alert( response.error );
return;
}
// Display image coming in from the result.
$(".img_upload_container img").attr('src', response.imageUrl).show();
// Store the WordPress attachment Id for form submission.
$("form input[name=bc_attachment_id]").val( response.attachmentId );
});
在过去的几个小时里,我一直在努力解决这个问题,但我已经想不出可能导致这个问题的想法了。
编辑:
IE9 控制台输出:
LOG: [FineUploader] Processing 1 files or inputs...
LOG: [FineUploader] Sending upload request for 0
SEC7111: HTTPS security is compromised by res://ieframe.dll/forbidframing.htm
SEC7111: HTTPS security is compromised by res://ieframe.dll/ErrorPageTemplate.css
SEC7111: HTTPS security is compromised by res://ieframe.dll/errorPageStrings.js
SEC7111: HTTPS security is compromised by res://ieframe.dll/httpErrorPagesScripts.js
SEC7111: HTTPS security is compromised by res://ieframe.dll/red_x.png
SEC7111: HTTPS security is compromised by res://ieframe.dll/bullet.png
SEC7111: HTTPS security is compromised by res://ieframe.dll/background_gradient.jpg
LOG: [FineUploader] Received response for 0
[FineUploader] Error when attempting to access iframe during handling of upload response (Error: Access is denied.
)
LOG: [FineUploader] iframe loaded
[FineUploader] Error when attempting to parse form upload response (Error: Access is denied.
)