form文件表单跨域提交时,无法获取远程服务器的返回结果,form提交代码如下:

form.submit({
url:'http://{remoteUrl}/hgisserver/wrds/file',
waitMsg: 'Reading your file...',
method : 'POST',
success: function(fp, o) {
     console.log(o);
},
failure: function(form, action) {
console.log(action);
}
});

报错如下:

"{success:false,message:"Blocked a frame with origin "http://localhost:8080" from accessing a cross-origin frame."}"

为解决这个问题,中间比较坎坷,http://blog.csdn.net/caostorm/article/details/74392158该博客的解决办法,我在extjs-4.2.1版本下试了没有效果,Content-Type仍然为text/plain.

现总结得到如下两种解决方案:

远程服务器已经设置了跨域请求,文件已经上传到远程服务器了,只是由于form新开的iframe无法接收服务器的返回结果。解决办法如下:

1、通过PHP代理转发请求和返回结果;

2、采用jquery的ajax请求;

第一种方法比较复杂,需设置php环境,避免文件过大无法上传,若直接将临时文件转发,文件名的传入还需在后台解析时注意;

form提交时代吗修改为:

form.submit({
url: '/php/formCrosUpload.php',
params:{
remoteUrl: "http://{remoteUrl}/hgisserver/wrds/file"
}
waitMsg: 'Reading your file...',
method : 'POST',
success: function(fp, o) {
console.log(action);
},
failure: function(form, action) {
console.log(action);
}
});

php处理:

<?php
header("Access-Control-Allow-Origin:*");
header("Access-Control-Allow-Methods:POST"); function curlPost($url,$postData)
{
$ch = curl_init();
curl_setopt($ch,CURLOPT_URL,$url);
curl_setopt($ch,CURLOPT_RETURNTRANSFER,true);
curl_setopt($ch,CURLOPT_HEADER, false);
curl_setopt($ch, CURLOPT_POST, count($postData));
curl_setopt($ch, CURLOPT_POSTFIELDS, $postData);
$output=curl_exec($ch);
curl_close($ch);
return $output;
} $url = trim($_POST['remoteUrl']);
$file = $_FILES['form-file'];
$tmpFile = $file["tmp_name"]; if($file["error"] > 0){
echo "file upload error:".$file["error"];
}
else{
$post_data = array (
$file['name'] => '@'. $tmpFile  //将文件名通过Field的key传入,后台解析时需注意,$tmpFile是临时文件,文件名为null
);
echo curlPost($url,$post_data);
} ?>

在工程配置web.xml文件制定的php.ini配置文件中设置设置php的文件上传大小限制:

web.xml:
......
<init-param>
<param-name>ini-file</param-name>
<param-value>WEB-INF/php.ini</param-value>
</init-param>
...... php.ini: upload_max_filesize = 50M //最大上传文件大小
post_max_size = 50M    //最大POST大小
memory_limit = 128M     //内存限制
max_execution_time = 30  //最大执行时间
max_input_time = 60    //最大输入时间

第二种方法比较简单,可增加等待提示框,实现与form提交等待同样的效果;通过FormData装载form文件,然后POST到远程服务器

代码如下:

    var fileEl = Ext.getCmp('form-file').fileInputEl.dom;
var fd = new FormData();
fd.append("file", fileEl.files[0]); var msg = new Ext.window.MessageBox();
msg.wait('Upload your file...');
$.ajax({
url: 'http://{remoteUrl}/hgisserver/wrds/file',
type: 'POST',
cache: false,
data: fd,
processData: false,
contentType: false,
dataType:"json",
beforeSend: function(){
uploading = true;
},
success : function(data) {
console.log(data);
form.reset();
},
error: function(data) {
Ext.Msg.alert('Fail', 'Upload File failed.');
},
complete: function(){
msg.close();
}
});

Extjs的form跨域提交文件时,无法获取返回结果的更多相关文章

  1. .NET压缩图片保存 .NET CORE WebApi Post跨域提交 C# Debug和release判断用法 tofixed方法 四舍五入 (function($){})(jQuery); 使用VUE+iView+.Net Core上传图片

    .NET压缩图片保存   需求: 需要将用户后买的图片批量下载打包压缩,并且分不同的文件夹(因:购买了多个用户的图片情况) 文章中用到了一个第三方的类库,Nuget下载 SharpZipLib 目前用 ...

  2. 代替jquery $.post 跨域提交数据的N种形式

    跨域的N种形式: 1.直接用jquery中$.getJSON进行跨域提交 优点:有返回值,可直接跨域: 缺点:数据量小: 提交方式:仅get (无$.postJSON) $.getJSON(" ...

  3. jquery来跨域提交表单

    说说用jquery来实现跨域提交表单 在jQuery中,我们使用json数据类型,通过getJSON方法来实现从服务端获取或发送数据,而当要向不同远程服务器端提交或者获取数据时,要采用jsonp数据类 ...

  4. 使用jQuery实现跨域提交表单数据

    我们在WEB开发中有时会遇到这种情况,比如要从A网站收集用户信息,提交给B网站处理,这个时候就会涉及到跨域提交数据的问题.本文将给您介绍如何使用jQuery来实现异步跨域提交表单数据.   在jQue ...

  5. [ActionScript 3.0] 跨域策略文件crossdomain.xml配置详解

    1.简介 flash在跨域时唯一的限制策略就是crossdomain.xml文件,该文件限制了flash是否可以跨域读写数据以及允许从什么地方跨域读写数据. 位于www.a.com域中的SWF文件要访 ...

  6. ajax跨域提交

    ajax跨域提交     如果在两个网站之间进行异步互动想要通过ajax时不可能的,因为header不支持xmlhttprequest这种方式的跨域提交. 但是jquery的ajax同时还提供了jso ...

  7. flash跨域策略文件crossdomain.xml

    flash在跨域时唯一的限制策略就是crossdomain.xml文件,该文件限制了flash是否可以跨域读写数据以及允许从什么地方跨域读写数据. 位于www.a.com域中的SWF文件要访问www. ...

  8. flash跨域策略文件crossdomain.xml配置详解

    来源:http://www.2cto.com/Article/201108/100008.html 0x01 简介 flash在跨域时唯一的限制策略就是crossdomain.xml文件,该文件限制了 ...

  9. ServiceStack支持跨域提交

    //ServiceStack对浏览器有一定的限制 //修改AppHost.cs文件 using Funq;using ServiceStack;using ServiceStackTest.Servi ...

随机推荐

  1. Java 之 JUC

    1. JUC 简介 在 Java 5.0 提供了 java.util.concurrent(简称JUC)包,在此包中增加了在并发编程中很常用的工具类, 用于定义类似于线程的自定义子系统,包括线程池,异 ...

  2. Azkaban简介及使用

    一.Azkaban概述 Azkaban是一个分布式工作流管理器,在LinkedIn上实现,以解决Hadoop作业依赖性问题. 我们有需要按顺序运行的工作,从ETL工作到数据分析产品. 特点: 1)给用 ...

  3. ovn-kubernetes执行流程概述

    Master部分 1.master初始化 以node name创建一个distributed logical router 创建两个load balancer用于处理east-west traffic ...

  4. Jersey 出现415 MediaType is not supported问题的原因

    前段时间在使用jersey的时候,经常碰到这个问题,一直没有找到真正的原因.找了其他的解决访问,比如使用jackson以及手动转为json再返回给前端. 后续发现问题出在domain对象属性类型和se ...

  5. 用仿ActionScript的语法来编写html5——第一篇,显示一张图片

    第一篇,显示一张图片 一,代码对比 as代码: public var loader:Loader; public function loadimg():void{ loader = new Loade ...

  6. HI35xx平台调试笔记

    1.音视频数据循环采集 a. 在sample_venc.c文件中,海思官方是把采集到的数据都保存到文件中,我们需要更改到缓存里,以便后面推送到rtsp/rtmp/hls服务端. ; i < s3 ...

  7. js自动类型转换

    <script> testeq0 = null == undefined; testeq1 = "0" == 0; //比较前字符串转换为数字 testeq2 = 0 ...

  8. dubbo总结

     一 .Dubbo产生背景 单一应用架构当网站流量很小时,只需一个应用,将所有功能都部署在一起,以减少部署节点和成本.此时,用于简化增删改查工作量的 数据访问框架(ORM) 是关键. 垂直应用架构当访 ...

  9. XVII Open Cup named after E.V. Pankratiev Stage 14, Grand Prix of Tatarstan, Sunday, April 2, 2017 Problem D. Clones and Treasures

    题目:Problem D. Clones and TreasuresInput file: standard inputOutput file: standard outputTime limit: ...

  10. quartz (一) 基于 Quartz 开发企业级任务调度应用

    本文转自:http://www.ibm.com/developerworks/cn/opensource/os-cn-quartz/ Quartz 基本概念及原理 Quartz Scheduler 开 ...