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鏈接中獲得信息。

希望能解決你的問題:)