Question

我希望在用户提交之前验证通过Ajax上传的文件。我确保它是javascript中的.txt或.csv，然后我想调用我的控制器来验证它是否符合我们的CSV标准。

我有：

 <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？我想在允许用户提交之前进行所有验证。我不是百分之百，我'允许'这样做

谢谢你的任何指导

Answer 1

您是否尝试将输入放入表单中？

<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)
{
    ....
}

Answer 2

我在这里使用HTML5文件api得到答案。 Upload photo with jQuery Dialog in ASP.NET MVC site

它被拒绝投票，但我总是使用它进行上传，并且有效。

在Ajax中获取<input type =“file”/>目录

2 个答案: