JQuery Form Plugins Error loading files when returning line from server

Question

I am trying to use jQuery FormPlugin to upload files. It is loaded into the ASP.NET MVC controller action with a return type string.

Controller action with string return type

 [HttpPost]
 public string PracticeInfoFormUpload(HttpPostedFileBase myfile, FormCollection formCollection)
 {
      //Store the file on disk (Logic excluded for brevity)
      return "good";
 }

The file is uploaded and the response is displayed in Chrome and Firefox. But when I use IE, it displays a response line on a new page. How to fix this to work in IE?

Note. The file also loads correctly in IE. The problem is what it does with the answer, unlike other browsers.

Note. I am using IE-10

Expected Result and IE Problem

jQuery

<script src="http://malsup.github.com/jquery.form.js"></script>  
<script type="text/javascript">
        $(function () {
            var bar = $('.bar');
            var percent = $('.percent');
            var status = $('#status');

            $('#frmUpload').ajaxForm({
                beforeSend: function () {
                    status.empty();
                    var percentVal = '0%';
                    bar.width(percentVal)
                    percent.html(percentVal);
                },
                uploadProgress: function (event, position, total, percentComplete) {
                    var percentVal = percentComplete + '%';
                    bar.width(percentVal)
                    percent.html(percentVal);
                },
                success: function () {
                    var percentVal = '100%';
                    bar.width(percentVal)
                    percent.html(percentVal);
                },
                complete: function (xhr) {
                    var returnMessage = xhr.responseText;
                    //alert(xhr.responseText);
                    //status.html(xhr.responseText);
                    if (returnMessage == "good") {
                        status.html('<div style="Color:#00A000;"><i>File successfully uploaded</i></div>');
                    }
                    else {
                        status.html('<div style="Color:#FF0000;"><i>Error! Please try again</i></div>');
                    }

                }
            });

        });


    </script>

HTML

  <div style="float:left;width:100%;border:0px solid green;margin: 0 0 0 0px;">

                        @using (Html.BeginForm("PracticeInfoFormUpload", "Home", FormMethod.Post, new { enctype = "multipart/form-data", name = "frmUpload", id = "frmUpload" }))
                        {
                            <input type="hidden" name="Practice" value="DefaultText"><br>


                            <div class="input-group" style="margin-left:20px;">
                                <input type="file" class="form-control input-sm" name="myfile" id="myfile">
                            </div>
                            <input type="submit" value="Upload " style="margin:2px 0 2px 120px;" class="approvalRadioBackground">

                        }

                        <div style="width:80%; padding-left:50px; text-align:center; margin:3px 0 5px 0;">
                            <div class="progress">
                                <div class="bar"></div>
                                <div class="percent">0%</div>
                            </div>
                            <div id="status"></div>
                        </div>
                    </div>

Answer 1

1. ContentResult .

2. contentType, dataType Ajax jquery

:

[HttpPost]
    public ContentResult PracticeInfoFormUpload(HttpPostedFileBase myfile, FormCollection formCollection)
    {
      //Store the file on disk (Logic excluded for brevity)
       return Content("good");
    }

Jquery:

$.ajax({
    type: "POST",
    url: "/Home/PracticeInfoFormUpload",
    data: '{myfile: "' + yourdata + '" }',
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (response) {
        alert(response);
    },
    failure: function (response) {
        alert(response.responseText);
    },
    error: function (response) {
        alert(response.responseText);
    }
});

Answer 2

, :

• id input, , id="UploadId":

  <input type="submit" value="Upload" id="UploadId" 
     style="margin:2px 0 2px 120px;" class="approvalRadioBackground">
  

• , , :

  $(document).ready(function() { 
      var options = {...
      /*abridged for clarity*/
  
      $('#upload').submit(function() {
          $(this).ajaxSubmit(options);
          return false;
      });
  });
  

• Internet Explorer . OnClick, , . .

Answer 3

HTML code sample target HTML .

target: '#status', JS ( )

$('#frmUpload').ajaxForm({
        // target identifies the element(s) to update with response 
        target: '#status', 
        beforeSend: function () {
            status.empty();
            var percentVal = '0%';
            bar.width(percentVal)
            percent.html(percentVal);
        },
        //rest omitted for brevity...

Hide result

.

Answer 4

You tried changing the controller to return Json instead of a string. You can try something like this: -

    [HttpPost]
    public JsonResult PracticeInfoFormUpload(HttpPostedFileBase myfile,FormCollection formCollection)
    {
        //Store the file on disk (Logic excluded for brevity)
        return new Json("good");
    }

Then change your code in your ajax request to contentType: "application / json" dataType: "json"