Retrieving HTTP status code from loaded iframe with Javascript

Question

I used the jQuery Form plugin for asynchronous form submission. For forms that contain files, it copies the form to a hidden iframe, submits it, and copies back the iframe's contents. The problem is that I can't figure out how to find what HTTP status code was returned by the server. For example, if the server returns 404, the data from the iframe will be copied as normal and treated as a regular response.

I've tried poking around in the iframe objects looking for some sort of status_code attribute, but haven't been able to find anything like that.

The $.ajax() function can't be used, because it does not support uploading files. The only way to asynchronously upload files that I know of is using the hidden iframe method.

why not run some js on the result iframe? what i mean is, you can set a timeout for the page load ( on the parent ), and the child (iframe) should set a value in the parent. if that value is not set until the timeout, the iframe failed. — Rafael Herscovici
– Rafael Herscovici, Commented May 24, 2011 at 12:25
ajax can be used if you read the file into a string first then just submit it like a regular old POST — Hashbrown
– Hashbrown, Commented Jun 22, 2018 at 5:16

Coyod · Accepted Answer · 2009-12-04 16:09:16Z

19

You can't get page headers by JS, but you can distinguish error from success: Try something like this:

<script type="text/javascript">

    var uploadStarted = false;
    function OnUploadStart(){            
        uploadStarted = true;
    }

    function OnUploadComplete(state,message){       

       if(state == 1)
        alert("Success: "+message);     
       else
         if(state == 0 && uploadStarted)
            alert("Error:"+( message ? message : "unknow" ));
    }   

</script>


<iframe id="uploader" name="uploader" onload="OnUploadComplete(0)" style="width:0px;height:0px;border:none;"></iframe>

<form id="sender" action="/upload.php" method="post" target="uploader" enctype="multipart/form-data" onsubmit="OnUploadStart()">
<input type="file" name="files[upload]"/>
<input type="submit" value="Upload"/>
</form>

On server side:

/*
  file: upload.php
*/
<?php 

   // do some stuff with file       

  print '<script type="text/javascript">';
  if(success)
     print 'window.parent.OnUploadComplete(1,"File uploaded!");';
  else
     print 'window.parent.OnUploadComplete(0, "File too large!");';
  print  '</script>';
?>

answered Dec 4, 2009 at 16:09

Coyod

2,6962 gold badges18 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

KyleWpppd Over a year ago

If the file is too large, php will 500, preventing your error message from being shown.

choi gray · Accepted Answer · 2015-03-16 02:13:22Z

-4

You can't retrieving HTTP status code from loaded "iframe" directly. But when an http error occured, the server will returned nothing to the "iframe". So the iframe has not content. you can check the iframe body, when the body of iframe is blank, use ajax with the same url to get the response from server. Then you can retrieve the http status code from response.

answered Mar 16, 2015 at 2:13

choi gray

1

2 Comments

Lothar Over a year ago

Very wrong. This is just a common case, but not even a convention or good practice. HTTP servers usually should send an response body containing an error message.

choi gray Over a year ago

In the case of using "iframe" to download a file, it's different with general HTTP request. In particular, IE9 will replace "iframe" body with local error page from client machine unless HTTP status is 200. Thus, when you try to get the body of iframe, you will get a cross-domain error. @Lothar

Collectives™ on Stack Overflow

Retrieving HTTP status code from loaded iframe with Javascript

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related