C＃剃刀上传文件

Question

我使用CSHTML作为视图

这是我输入：

@Html.TextArea("DESCRIPTION", null, new { @class = "field-longtext", @cols = 100, @rows = 5, maxlength = 255 }) 

@Html.TextBox("DOC_TYPE", null, new { @class = "field-longtext", maxlength = 10 }) 

@Html.TextBox("DOC_FILE", null, new { @class = "field-longtext", @type = "file" }) 

，并使用AJAX后

function UploadFile() { 

    var url = '@Url.Action("CreateUploadFile")'; 
    var data = {}; 
    var result = false; 

    $('#@ViewBag.FormName').find('input, textarea').each(function() { 
     data[$(this).attr('name')] = $(this).val(); 
    }); 

    data.PROBLEM_CALL_ID = @Model.Model.PROBLEM_CALL_ID; 

    $.ajax({ 
     type: 'POST', 
     url: url, 
     data: data, 
     async: false, 
     success: function (data) { 
      if (data.result) { 
       var selectedRow = SubFormService.tableList['#@ViewBag.TableName'].selectedRow; 
       result = true; 
      } else { 
       alert(data.errorMsg); 
       result = false; 
      } 
     } 
    }); 

    return result; 
} 

我的控制器：

[HttpPost] 
    public ActionResult CreateUploadFile(Models.Shared.DocumentModel vm) 
    { 
     var id = -1; 
     var result = string.Empty; 
     var json = new BasicJsonResult(); 

     var file = vm.DOC_FILE; 

     LogUtility.Debug(file.ContentLength.ToString()); 
     if (file != null && file.ContentLength > 0) 
     { 
      var fileName = Path.GetFileName(file.FileName); 
      LogUtility.Debug(fileName); 
      LogUtility.Debug(Server.MapPath("~/Images/")); 
      var path = Path.Combine(Server.MapPath("~/Images/"), fileName); 
      file.SaveAs(path); 
     } 

     return Json(json, JsonRequestBehavior.AllowGet); 
    } 

代码var file = vm.DOC_FILE;提醒我（对象引用未设置为对象的实例。），但我可以获得另一个控制值（vm.DESCRIPTION, vm.DOC_TYPE）。

请帮忙。

另外，我想在文件上传时下载文件。

Answer 1

通过引入XHR2的，现在可以上传使用AJAX的文件。你可以使用FormData来实现这一点。假设你的投入要素是<form>里面你可以试试这个（还包括以这种形式为PROBLEM_CALL_ID领域隐藏的输入，使得它被发送到服务器）：

function UploadFile() { 
    var url = '@Url.Action("CreateUploadFile")'; 
    var formData = new FormData($('form')[0]); 
    var result = false; 

    $.ajax({ 
     type: 'POST', 
     url: url, 
     data: formData, 
     async: false, 
     success: function (data) { 
      ... 
     } 
    }); 

    return result; 
} 

因此，只要确保你有缠绕的形式标记内的输入元件（优选具有一个id，以便可以更具体地选择它）：

<form id="myForm"> 
    @Html.TextArea("DESCRIPTION", null, new { @class = "field-longtext", @cols = 100, @rows = 5, maxlength = 255 }) 

    @Html.TextBox("DOC_TYPE", null, new { @class = "field-longtext", maxlength = 10 }) 

    @Html.TextBox("DOC_FILE", null, new { @class = "field-longtext", @type = "file" }) 

    @Html.HiddenFor(x => x.PROBLEM_CALL_ID) 
</form> 

，然后选择这样的形式：

var formData = new FormData($('#myForm')[0]); 

还请，请，请不要做：

async: false 

通过这样做，你击败一个异步调用服务器的全部目的。如果你设置了这个标志，浏览器将在文件上传过程中冻结，这是一个非常糟糕的用户体验。如果你这样做，那么你最好使用普通的HTML表单提交来上传文件 - 你失去了AJAX的所有好处，并且没有必要将此标志设置为true来发出AJAX请求。

Answer 2

如果你想使用ajax上传文件，你应该使用iframe。

<iframe name="upload-data" id="upload-data" frameborder="0" width="0" height="0"></iframe> 
<form id="frm-add-update" enctype="multipart/form-data" method="post" target="upload-data"> 
    // HTML Code 
</form> 

就我而言，我的控制器将返回一个代码，“0×001”，如果上载过程成功，否则将返回“0×00”。

当准备好文档后

$("#upload-data").hide(); 
    $("#upload-data").load(function() { 
     var data = $.parseJSON($("#upload-data").contents().text()); 
     if (data != null) { 
      if (data.code != "0x001") { 
       // you got a problem 
      } 
      else { 
       // you got no problem 
      } 
     } 
    }); 

在控制器

[Authorize, HttpPost] 
    private JsonResult ActionNAme(ModelClass modelObj, HttpPostedFileBase htmlFileTagName) 
    { 
     string code = "0x001"; 
     string message = ""; 
     try 
     { 
      // your process here 
     } 
     catch(Exception) 
     { 
      code = "0x000"; 
      message = ex.Message; 
     } 

     return new JsonResult() 
     { 
      Data = new 
      { 
       code = code, 
       message = message 
      } 
     }; 
    } 

要下载上传的文件，我想你应该改变操作的返回类型。您将从this链接中获得信息。

希望能解决你的问题:)