2017-10-06 34 views
0

我需要在MVC中通過ajax模式上傳圖像。我使用這種方法在Js代碼中一切正常,它獲取formdata和ajax請求正確地發送到控制器,但在我的控制器,我得到Request.File [「myfile」]總是空...我到處尋找解決方案,但沒有找到請幫助我這就是這麼緊急...謝謝所有 這裏是我的js代碼: 我的Request.Files行動方在MVC中通過ajax上傳文件時始終爲空

\t \t function UploadImage() { 
 
\t \t \t var data = new FormData(); 
 
\t \t \t var files = $("#myfile").get(0).files; 
 
\t \t \t if (files.length > 0) { 
 
\t \t \t \t data.append("MyImages", files[0]); 
 
\t \t \t } 
 

 
\t \t $.ajax({ 
 
\t \t \t \t url: "@Url.Action("SaveFile","Home")", 
 
\t \t \t \t type: "POST", 
 
\t \t \t \t processData: false, 
 
\t \t \t \t contentType: false, 
 
\t \t \t \t enctype: 'multipart/form-data', 
 
\t \t \t \t data: {}, 
 
\t \t \t \t success: function (response) { 
 
\t \t \t \t \t //code after success 
 
\t \t \t \t \t console.log(response); 
 
\t \t \t \t \t alert(response); 
 
\t \t \t \t }, 
 
\t \t \t \t error: function (er) { 
 
\t \t \t \t \t alert(er); 
 
\t \t \t \t } 
 

 
\t \t \t }); 
 
\t \t } 
 
\t 
 
Html:
@{ 
 
    Layout = null; 
 
} 
 

 
<!DOCTYPE html> 
 

 
<html> 
 
<head> 
 
    <meta name="viewport" content="width=device-width" /> 
 
\t <title>upload</title> 
 
\t <link href="~/Content/bootstrap.css" rel="stylesheet" /> 
 
\t <script src="~/Scripts/jquery-1.10.2.min.js"></script> 
 
\t <script src="~/Scripts/bootstrap.min.js"></script> 
 
\t <script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script> 
 
\t 
 
</head> 
 
<body> 
 
<div class="row"> 
 
\t <div class="container"> 
 
\t \t <div> 
 
\t \t \t file:<input type="file" id="myfile" style="display: block"/> 
 
\t \t \t <br /> 
 
\t \t \t <input type="button" value="save" id="btnUpload" onclick="UploadImage()"/> 
 
\t \t </div> 
 
\t </div> 
 
</div> 
 
</body> 
 
</html>

和我的行動:

 [HttpPost] 
    public JsonResult SaveFile() 
    { 
     var uniqueName = ""; 
     if (Request.Files["myfile"] != null) 
     { 
      var file = Request.Files["myfile"]; 
      if (file.FileName != "") 
      { 
       var ext = System.IO.Path.GetExtension(file.FileName); 

       uniqueName = System.Guid.NewGuid().ToString() + ext; 

       var rootPath = Server.MapPath("~/Upload/"); 

       var fileSavePath = System.IO.Path.Combine(rootPath, uniqueName); 
       file.SaveAs(fileSavePath); 
      } 
     } 

     return Json(new 
     { 
      success=false, 
      name=uniqueName 
     },JsonRequestBehavior.AllowGet); 
    } 
+1

你必須通過FORMDATA替換'數據:{}'和'數據:數據,' – Curiousdev

+0

注意,你也可以簡單地給你的文件輸入一個'name'屬性(說'名字=「文件」 ')並使用'var data = new FormData($('form')。get(0));'並移除不必要的'enctype:'multipart/form-data','並且您的POST方法是'public JsonResult SaveFile(HttpPostedFileBase文件) –

+0

用你當前的代碼,當你確實發送你的數據時,你指的是一個不存在的屬性 - 你將它命名爲''MyImages'',而不是''myfile'' –

回答

0

在此之後example這是非常相似的代碼

改變這種

data: {} 

data: data 

示例代碼視圖

<input type="file" id="FileUpload1" /> 
<input type="button" id="btnUpload" value="Upload Files" /> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<script> 
$(document).ready(function(){ 
    $('#btnUpload').click(function() { 

     // Checking whether FormData is available in browser 
     if (window.FormData !== undefined) { 

      var fileUpload = $("#FileUpload1").get(0); 
      var files = fileUpload.files; 

      // Create FormData object 
      var fileData = new FormData(); 

      // Looping over all files and add it to FormData object 
      for (var i = 0; i < files.length; i++) { 
       fileData.append(files[i].name, files[i]); 
      } 

      // Adding one more key to FormData object 
      fileData.append('username', ‘Manas’); 

      $.ajax({ 
       url: '/Home/UploadFiles', 
       type: "POST", 
       contentType: false, // Not to set any content header 
       processData: false, // Not to process data 
       data: fileData, 
       success: function (result) { 
        alert(result); 
       }, 
       error: function (err) { 
        alert(err.statusText); 
       } 
      }); 
     } else { 
      alert("FormData is not supported."); 
     } 
    }); 
}); 
</script> 

鱈魚樣品E控制器

[HttpPost] 
public ActionResult UploadFiles() 
{ 
// Checking no of files injected in Request object 
    if (Request.Files.Count > 0) 
    { 
     try 
     { 
      // Get all files from Request object 
      HttpFileCollectionBase files = Request.Files; 
      for (int i = 0; i < files.Count; i++) 
      { 
       //string path = AppDomain.CurrentDomain.BaseDirectory + "Uploads/"; 
       //string filename = Path.GetFileName(Request.Files[i].FileName); 

       HttpPostedFileBase file = files[i]; 
       string fname; 

       // Checking for Internet Explorer 
       if (Request.Browser.Browser.ToUpper() == "IE" || Request.Browser.Browser.ToUpper() == "INTERNETEXPLORER") 
       { 
        string[] testfiles = file.FileName.Split(new char[] { '\\' }); 
        fname = testfiles[testfiles.Length - 1]; 
       } 
       else 
       { 
        fname = file.FileName; 
       } 

       // Get the complete folder path and store the file inside it. 
       fname = Path.Combine(Server.MapPath("~/Uploads/"), fname); 
       file.SaveAs(fname); 
      } 
      // Returns message that successfully uploaded 
      return Json("File Uploaded Successfully!"); 
     } 
     catch (Exception ex) 
     { 
      return Json("Error occurred. Error details: " + ex.Message); 
     } 
    } 
    else 
    { 
     return Json("No files selected."); 
    } 
} 
+0

非常感謝你我的朋友是真的有幫助 –

+0

@HosseinGholizadeh,請避免在stackoverflow中表示感謝(請參閱規則https://stackoverflow.com/help/someone-answers),請求如果它對你有幫助,你可以接受這個anser或投票+1 –