iframe onloads before the time when file uploads

I'm trying to upload file on server by submitting the form and return information about file upload status in iframe. The problem is that iframe onloads before the time when file uploads...

Here is my JS:

   var resp;       
   function doAjaxPost()
   {
       $.ajax({
           Accept: "text / html, application / xhtml + xml, application / xml; q = 0.9, image / webp, * /*;q=0.8",
           contentType: "application/x-www-form-urlencoded",
           type: "POST",
           url: some_uri,
           data: some_data,
           success: function (response) 
           {
              var recordid = response.substring(response.indexOf('<span id="st_id"></span>') + '<span id="st_id"></span>'.length, response.indexOf('<span id="fin_id"></span>'));


                $("#photo").attr("action", "/uploadmyshowcase?table=enmyshowcase&field=enf_photow&id=" + recordid);
                $("#photo").submit();
                resp = response;
           }
    } );
    function frameCheck(frm)
    {
        var frmDoc = frm.contentDocument || frm.contentWindow.document;
        var field;
        if (frmDoc.body.innerHTML && /You successfully uploaded file/.test(frmDoc.body.innerHTML))
        {
            $('#list').html(resp.substring(resp.indexOf('<span id="st_list"></span>'), resp.indexOf('<span id="fin_list"></span>')));
            // Here I replace the part of the current page when file uploaded by placing the <img>-tag with the link on uploaded file.
        }
    }

Here is my HTML:

  <div class="col-md-8" >
       <form id="photo" method="POST" action="" target="result" enctype="multipart/form-data" accept-charset="UTF-8">
            <input class="noreq input_file" type="file" name="file">
            <input class="noreq input_file" style="display:none" type="text" name="name">                                                   
       </form>                                        
  </div>
  <iframe class="hidden" id="res" name="result" onload="frameCheck(this)"></iframe>

Here is my upload controller:

 @RequestMapping(value = "/uploadmyshowcase", method = RequestMethod.POST)
public @ResponseBody
String uploadFileController(@RequestParam("name") String name,
        @RequestParam("file") MultipartFile file,
        @RequestParam(value = "table", required = false) String table,
        @RequestParam(value = "field", required = false) String field,
        @RequestParam(value = "id", required = false) String Id,
        Model model) {

    if (!file.isEmpty()) {
        try {
            byte[] bytes = file.getBytes();
            File dir = new File("D:\\NetBeansProjects\\bar\\src\\main\\webapp\\resources\\rcvdFiles");
            if (!dir.exists()) {
                dir.mkdirs();
            }
            String[] ext;
            if (file.getOriginalFilename().contains(".")) {
                ext = file.getOriginalFilename().toString().split("\\.");
                if (!"jpg".equals(ext[1]) && !"jpeg".equals(ext[1])) {
                    return "Wrong format~" + field;
                }
            } else {
                return "Wrong format~" + field;
            }
            File serverFile = new File(dir.getAbsolutePath() + File.separator + table + "-" + field + "-" + Id + "." + ext[1]);
            BufferedOutputStream stream = new BufferedOutputStream(new FileOutputStream(serverFile));
            stream.write(bytes);
            stream.close();
            String href = "";
            switch (field) {
                case "enf_photow":
                    if (new File(dir.getAbsolutePath() + File.separator + table + "-" + field + "-" + Id + "." + ext[1]).exists()) {
                        href = "/resources/rcvdFiles/" + table + "-" + field + "-" + Id + "." + ext[1];
                    }
                    break;
            }
            return "You successfully uploaded file~" + field + "~" + href + "~" + Id;
        } catch (Exception e) {
            return "Wrong format~" + field;
        }
    } else {
        return "Wrong format~" + field;
    }

As result I see, that frameCheck() is calling before the time when file uploaded on the server. And the IMG that I placing programmatically on page is empty and console says, that Resource not found... What's wrong?

Thank You.

EDIT

I tried to create iframe programmatically, but still I have the same result :(

My modified JS:

 $.ajax({
        Accept: "text / html, application / xhtml + xml, application / xml; q = 0.9, image / webp, * /*;q=0.8",
        contentType: "application/x-www-form-urlencoded",
        type: "POST",
        url: uri,
        data: ctrls,
        success: function (response) {
            var recordid = response.substring(response.indexOf('<span id="st_id"></span>') + '<span id="st_id"></span>'.length, response.indexOf('<span id="fin_id"></span>'));
            if(!del)
            {
                var iframe = document.createElement("iframe");
                iframe.name = "result";
                iframe.setAttribute('id', "res");
                document.body.appendChild(iframe);
                $("#photo").attr("action", "/uploadmyshowcase?table=enmyshowcase&field=enf_photow&id=" + recordid);
                $("#photo").prop("target", "result");
                $("#photo").submit();
                resp = response;
                $("#res").load(function() {
                    frameCheck($("#res"));
                });

            }
        }
    } );

My modified HTML:

  <form id="photo" method="POST" action="" enctype="multipart/form-data" accept-charset="UTF-8">
         <input class="noreq input_file" type="file" name="file">
         <input class="noreq input_file" style="display:none" type="text" name="name">                                                   
  </form>