Retrieving HTTP status code from loaded iframe with Javascript


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.


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.

By : choi gray

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); 	
         if(state == 0 && uploadStarted)
            alert("Error:"+( message ? message : "unknow" ));


<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"/>

On server side:

  file: upload.php

   // do some stuff with file       

  print '<script type="text/javascript">';
     print 'window.parent.OnUploadComplete(1,"File uploaded!");';
     print 'window.parent.OnUploadComplete(0, "File too large!");';
  print  '</script>';
By : Coyod

Depending on your situation, you might have another option: in-license third-party code.

I've consulted at a couple of companies where that would be the sensible choice, although seemingly "throwing away IP" can be a big barrier for management. At my current company, we seriously considered the viable option of using third-party code to replace our core framework, but that idea was ultimately rejected more for business reasons than technical reasons.

To directly answer your question, we finally chose to rewrite the legacy framework - a decision we didn't take lightly! 14 months on, we don't regret this choice at all. Just considering the time spent fixing bugs, our new framework has nearly paid for itself. On the negative side, it is not quite feature-complete yet so we are in the unenviable position of maintaining two separate frameworks in parallel until we can port the last of our "front-end" applications.

By : Stewart

This video can help you solving your question :)
By: admin