ExtJS cannot get returned results when file is submitted across domains

Source: Internet
Author: User
Tags php file upload

When a form file form is submitted across domains, the return result of the remote server cannot be obtained, and the form submission code is as follows:

form.submit ({         URL:'http://{remoteurl}/hgisserver/wrds/file',     'Reading your file ... ' ,     ' POST ' ,    success:function (FP, O) {console.log (o);    },    failure:function (form, action) {        Console.lo g (action);}    });

The error is as follows:

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

To solve this problem, the middle more bumpy, http://blog.csdn.net/caostorm/article/details/74392158 the blog's solution, I tried in the extjs-4.2.1 version of No effect, Content-type is still text/plain.

We have summarized the following two solutions:

The remote server has set up a cross-domain request and the file has been uploaded to the remote server, just because the new iframe in the form cannot receive the server's return results. The solution is as follows:

1, through the PHP proxy forwarding request and return results;

2, using jquery ajax request;

The first method is more complex, you need to set up a PHP environment, to avoid too large files can not be uploaded, if the temporary files directly forwarded, the file name of the incoming also need to be in the background parsing attention;

is the form submission time modified to:

form.submit ({         '/php/formcrosupload.php ',    params:{        "Http://{remoteurl}/hgisserver /wrds/file "    }    ' Reading your file ... ',    ' POST ',    function (FP, O) {        console.log (action);    },    function(form, action) {        Console.log (action);}    );

PHP Processing:

<?PHPHeader("access-control-allow-origin:*"); Header("Access-control-allow-methods:post"); functionCurlpost ($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//Pass the file name through field key, note that $tmpfile is a temporary file and the file name is null         ); EchoCurlpost ($url,$post _data); }?>

Set the php file upload size limit in the php.ini configuration file that is established in the project configuration Web. xml file:

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//MAX upload file size post_max_size = 50M//Max post size memory_limit = 128M//Inside Save Limit Max_execution_time = 30//maximum execution time Max_input_time = 60//MAX input time

The second method is relatively simple, you can increase the wait prompt box, the same effect as the form submission wait, loading the form file by Formdata, and then post to the remote server

The code is as follows:

    varFileel = ext.getcmp (' Form-file ')). Fileinputel.dom; varFD =NewFormData (); Fd.append ("File", Fileel.files[0]); varmsg =NewExt.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 cannot get returned results when file is submitted across domains

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.