獲取<input type =「file」>內容在Ajax中

我想在用戶提交之前驗證通過Ajax上傳的文件。我確定它是一個.txt或JavaScript中的.csv，然後我想打電話給我的控制器來驗證它是否符合我們的CSV標準。獲取<input type =「file」>內容在Ajax中

我：

<input type="file" name="csvFile" id="csvFile" onchange="validateFile()"/>

和

function validateFile() { 
    var file = document.getElementById("csvFile"); 
    var extension = file.value.split('.').pop(); 

    if (extension != "csv" && extension != "txt") { 
     alert("A .csv or .txt file is required for upload"); 
     return false; 
    } 

    $.ajax({ 
     url: '@Url.Action("ValidateCSV","UploadCSV")', 
     type: "POST", 
     data: { file: document.getElementById("csvFile") }, //unclear here 

     success: function() { 
      alert("success"); 
     }, 

     error: function (error) { 
      alert("failed:" + error); 
     } 
    }); 
}

爲Ajax數據，我怎麼去得到HttpPostedFileBase控制器從文件希望？我希望在允許用戶提交之前進行所有驗證。我不是說我「允許」爲任何指導做到這一點

三江源100％

來源

2013-08-21 Jonesopolis

無法上傳通過AJAX的文件。參見[這個答案詳細信息]（http://stackoverflow.com/a/6462673/1199711）。 – Zabavsky

你是否簡單地試圖驗證該文件以.txt和.csv結尾，然後將其提交上傳？ – davids

否ajax控制器進行深度驗證（驗證標題，類型等） – Jonesopolis

我已經使用HTML5文件API，這裏的答案。 Upload photo with jQuery Dialog in ASP.NET MVC site

它被拒絕投票，但我總是用它來上傳，它的工作原理。

來源

2013-08-21 15:51:04 WannaCSharp

您是否嘗試將輸入放入表單中？

<form action="" method="post" enctype="multipart/form-data">   
<input type="file" name="csvFile" id="csvFile" class="file" onchange="changeFile();validFile();" /> 
<div class="fakefile"> 
    <input id="csvFileFakeId" /> 
    <button onclick="return false;" class="blue">Browse</button> 
</div> 
<button type="submit">Upload</button> 

</form>

驗證文件類型，如果無效，請清除輸入並提醒用戶。

<script type="text/javascript"> 
    var fileId = "csvFile"; 
    var fakeFileId = "csvFileFakeId"; 

    function changeFile() { 
     var value = $("#" + fileId).val().split('\\').pop(); 
     $("#" + fakeFileId).val(value); 
    }; 

    function validateFile() { 
     var file = document.getElementById("csvFile"); 
     var extension = file.value.split('.').pop(); 

     if (extension != "csv" && extension != "txt") { 
      alert("A .csv or .txt file is required for upload"); 
      $('#csvFile').val(''); 
      $('#csvFileFakeId').val(''); 
      return false; 
     } 
    }; 
</script>

而當後的形式（這是假設的MVC端點Upload或者你已經繪製了路徑

[HttpPost] 
public ActionResult Upload(HttpPostedFileBase file) 
{ 
    .... 
}

來源

2013-08-21 15:59:34 davids

獲取<input type =「file」>內容在Ajax中

回答

相關問題