XDS ajax文件上传

Question

希望有人能帮忙解决这个问题…

我正在构建一个可以在很多地方使用的web服务。

www.mywebservice.dev和www.mysite.dev在我的本地机器上设置，以在野外复制真实的东西…

我正在使用动态脚本标签方法，允许我发布一个表单，包括一个文件上传到第二个服务器。

www.mysite.com上的

页调用www.mywebservice.dev(目前它只是回显file_get_contents调用)。

web服务返回

<script script type="text/javascript">
$(function(){
    var $scrpt = $('<script></script>');
    $scrpt
        .attr('type' , 'text/javascript')
        .attr('src','http://www.mywebservice.dev/_assets/script/processEvent.js');
$('head').append($scrpt);
});
</script>
<form id=£event-form" ... >
.......
</form>

，它被注入到页面中，没有投诉…

在proces7it .js内部是另一个包含jquery的调用。表单插件(与上面的调用相同，但显然不同的文件)和ajax调用:

$('#event-form').bind('submit',function(){
    $(this).ajaxSubmit({
        url     : 'http://www.nmssys.dev/webservices.php',
        type    : 'POST' ,
        data    : { ajax : 'true' , webservice : 'processEvent' } ,
        success : function( response ){
                      consloe.log( ' WOOHOO ' , response );
                  },
        error   : function( jqXHR , textStatus , errorThrown ){
                      console.log( ' BORKED ' , jqXHR , textStatus , errorThrown );
                  }
    });
    return false;
});

到目前为止一切顺利…

现在，当提交被触发时，我得到一些奇怪的结果。

根据文档jquery。表单将自动创建一个iframe来容纳文件上传。当提交时，我从firebug获得以下信息…

控制台:

[jquery.form] state = uninitialized
[jquery.form] cannot access response document: Error: Permission denied to access property 'document'
[jquery.form] aborting upload... aborted
BORKED Object { aborted=1, status=0, more...} aborted server abort
[jquery.form] state = interactive

然而…

在请求条目下的Net选项卡中，响应是一个JSONObj，其中包含所发送的帖子的详细信息…

如果你能帮上忙，我将非常欢迎。

给大家一个拥抱和亲吻。

Answer 1

将响应数据返回到父页面的解决方案是使用jquery postmessage插件

Answer 2

OK，我有进展了!!!!

我正在努力与iframettarget选项，这是管理文件上传响应的方式。浏览器正在打开一个新选项卡，而不是将输出传递到指定的iframe。

解决方案…动态创建iframe并将其附加到body…

$('<iframe name="iframeUploader"/>')
    .prependTo('body')
    .attr({'id': 'responseTarget'})
    .css({'width':'1px','height':'1px','position':'absolute','left':'-9999px','top': '-9999px'});

并修改提交，如下所示:

$('#nms-event-form').live('submit',function(){
    $(this).ajaxSubmit({
        url          : 'http://www.mywebservice.dev/webservices.php' ,
        type         : 'POST' ,
        dataType     : 'xml' ,
        data         : { ajax : 'true' , webservice : 'processEvent' } ,
        success      : function( response , status ){
                           consloe.log( ' WOOHOO ' , response );
                       } ,
        error        : function( jqXHR , textStatus , errorThrown ){
                           console.log( ' BORKED ' , jqXHR , textStatus , errorThrown );
                       } ,
        complete     : function(){
                           console.log($('#responseTarget').html());
                       } ,
        iframeTarget : '#responseTarget'
    });
    return false;
});

CSS只是在iframe的内容发生变化时防止一个可见的闪光。

这是从远程服务器传递响应，到目前为止，看起来所有的数据和文件都被传递了。

在firebug中我现在得到:

[jquery.form] state = complete

和响应数据可以看到在iframe…

我已经添加了一个完整的选项到ajaxSubmit，但到目前为止，它还没有触发(即使我得到的状态=完整的消息在控制台)，但我会克服这一点，并报告回来，当我得到它…

Answer 3

文档说，如果您使用iframettarget，那么它不会尝试处理响应。如果还能这样就好了