ajax - jQuery Form 插件不会调用 IE 8 中的方法

Question

我正在尝试将文件上传到服务器，但是当我提交表单时，它不会调用ActionResult。它可以在 chrome、FF 中运行，但不能在 IE 中运行。当我从 IE 中的 form 中删除 enctype="multipart/form-data" 属性时，它会调用方法，但没有文件上传...

我有这样的输入:

<input id="jqueryfileupload" type="file" name="files" data-upload-id="@documentUniqueId"
data-url="@Url.Action(MVC.Profile.Documents().AddRouteValue("documentUniqueId", documentUniqueId))" multiple>

jQuery 代码:

$(document).on('change', '.documents-upload-container #jqueryfileupload', function (e) {
        e.preventDefault();
        e.stopPropagation();
        var $this = $(this);
        //input itself is not in the form tag, so i am creating form here and  
        //submitting it this way
        var formContainer = $('<form action="' + $this.data('url') + '" enctype="multipart/form-data" method="POST"></form>');
        $this.appendTo(formContainer);
        var contentTypeOption = $.browser.msie ? 'text/html' : 'application/json';
        var iframeOption = $.browser.msie ? true : false;
        var options = {
            dataType: 'json',
            //contentType: contentTypeOption,
            //iframe: iframeOption,
            method: 'POST',
            success: function (response, textStatus, xhr, form) {
                alert(response);
            },
            error: function (xhr, textStatus, errorThrown) {

                alert(xhr);
                alert(textStatus);
                alert(errorThrown);
            },
            clearForm: true
        };

        $(formContainer).ajaxSubmit(options);
        return false;
    });

IE 中没有任何错误，也没有发出任何警报。只是方法没有被调用...

操作方法:

[HttpPost]
public virtual ActionResult Documents(IEnumerable<HttpPostedFileBase> files, string documentUniqueId)
{
    var result = new ContentResult();
    if (files != null)
    {
        foreach (var item in files)
        {
            string docName = documentUniqueId + "_" + item.FileName;
            var filename = Path.Combine(Server.MapPath("~/App_Data"), docName);
            item.SaveAs(filename);
        }

        var docs = files.Select(x => new
        {
            url = Url.Action(MVC.Profile.Documents(documentUniqueId + "_" + x.FileName, x.ContentType)),
            name = x.FileName,
            contentType = x.ContentType,
            id = documentUniqueId + "_" + x.FileName
        });

        result.Content = new JavaScriptSerializer().Serialize(docs);
        return result;
    }
    result.Content = new JavaScriptSerializer().Serialize(new { success = false });
    return result;
}

[HttpGet]
public virtual ActionResult Documents(string fileName, string contentType)
{
    var docPath = Path.Combine(Server.MapPath("~/App_Data"), fileName);
    return File(docPath, contentType);
}

我使用这个插件:http://malsup.com/jquery/form/

Answer 1

我认为您没有在页面中插入表单。那就是问题所在。您必须添加 formContainer.appendTo(container); 试试这个代码:

$(document).on('change', '.documents-upload-container #jqueryfileupload', function (e) {
   e.preventDefault();
   e.stopPropagation();
   var $this = $(this);
   var container = $this.parents('.documents-upload-container').addClass("current-container");
   var formContainer = $('<form action="' + $this.data('url') + '"   enctype="multipart/form-data" method="post"></form>');
   $this.appendTo(formContainer);
   formContainer.appendTo(container);
   var contentTypeOption = $.browser.msie ? 'text/plain' : 'application/json';
   var iframeOption = $.browser.msie ? true : false;

   var options = {
      dataType: 'json',
      contentType: contentTypeOption,
      //iframe: iframeOption,
      method: 'POST',
      //data: { 'isIE': iframeOption },
      success: function (response, textStatus, xhr, form) {
         alert(response);
      },
      error: function (xhr, textStatus, errorThrown) {
        alert(xhr);
        alert(textStatus);
        alert(errorThrown);
      },
    clearForm: true
   };

  formContainer.ajaxSubmit(options);    
  return false;
});