当字符串从服务器返回时，jQuery 表单插件的文件上传问题

Question

我正在尝试使用jQuery Form插件上传文件。它正在上传到返回类型 string 的 ASP.NET MVC Controller 操作。

具有字符串返回类型的 Controller 操作

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

文件已上传并在 Chrome 和 Firefox 中显示响应。但是当我使用 IE 时，它在新页面中显示响应字符串。如何修复此问题以使其在 IE 中也能工作？

注意:文件在 IE 中也能正确上传。问题在于它对响应的处理方式与其他浏览器不同。

注意:我使用的是IE-10

预期结果和 IE 问题

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.您应该在 Controller 中使用ContentResult。

2.在jquery的Ajax方法中应该指定contentType,dataType

Controller :

[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);
    }
});