jQuery ajax 在 asp.net mvc 中上传文件

Posted 2023-04-13

【中文标题】jQuery ajax 在 asp.net mvc 中上传文件

【英文标题】：jQuery ajax upload file in asp.net mvc

【发布时间】：2011-01-26 13:31:57

【问题描述】：

我的视图中有一个文件

<form id="upload" enctype="multipart/form-data">
   <input type="file" name="fileUpload" id="fileUpload" size="23" />
</form>

还有一个ajax请求

$.ajax(
    url: '<%=Url.Action("JsonSave","Survey")  %>',
    dataType: 'json',
    processData: false,
    contentType: "multipart/mixed",
    data: 
        Id: selectedRow.Id,
        Value: 'some date was added by the user here :))'
    ,
    cache: false,
    success: function (data) 
);

但 Request.Files 中没有文件。 ajax 请求有什么问题？

【问题讨论】：

json 不能像这样上传文件。最好使用浏览器默认的上传行为。

【参考方案1】：

Upload files using AJAX in ASP.Net MVC

自 html5 以来情况发生了变化

JavaScript

document.getElementById('uploader').onsubmit = function () 
    var formdata = new FormData(); //FormData object
    var fileInput = document.getElementById('fileInput');
    //Iterating through each files selected in fileInput
    for (i = 0; i < fileInput.files.length; i++) 
        //Appending each file to FormData object
        formdata.append(fileInput.files[i].name, fileInput.files[i]);
    
    //Creating an XMLHttpRequest and sending
    var xhr = new XMLHttpRequest();
    xhr.open('POST', '/Home/Upload');
    xhr.send(formdata);
    xhr.onreadystatechange = function () 
        if (xhr.readyState == 4 && xhr.status == 200) 
            alert(xhr.responseText);
        
    
    return false;
   

控制器

public JsonResult Upload()

    for (int i = 0; i < Request.Files.Count; i++)
    
        HttpPostedFileBase file = Request.Files[i]; //Uploaded file
        //Use the following properties to get file's name, size and MIMEType
        int fileSize = file.ContentLength;
        string fileName = file.FileName;
        string mimeType = file.ContentType;
        System.IO.Stream fileContent = file.InputStream;
        //To save file, use SaveAs method
        file.SaveAs(Server.MapPath("~/")+ fileName ); //File will be saved in application root
    
    return Json("Uploaded " + Request.Files.Count + " files");

编辑：HTML

<form id="uploader">
    <input id="fileInput" type="file" multiple>
    <input type="submit" value="Upload file" />
</form>

【讨论】：

可以添加视图的代码吗？ HTML .. 到这个答案。

不错的博客 Ajeesh！谢谢！

您好，有没有办法将上传的文件绑定到模型中？

这在 IE 中不起作用。 IE 在 file.FileName 参数中传递用户的完整本地路径，因此您需要 Path.GetFileName(file.FileName) 以确保安全。否则很棒的答案。很大的帮助，谢谢。

此答案中的链接（以及评论中的另一个）已损坏

【参考方案2】：

现在可以通过将FormData 对象传递给$.ajax 请求的data 属性来上传AJAX 文件。

由于 OP 专门要求一个 jQuery 实现，所以你去：

<form id="upload" enctype="multipart/form-data" action="@Url.Action("JsonSave", "Survey")" method="POST">
    <input type="file" name="fileUpload" id="fileUpload" size="23" /><br />
    <button>Upload!</button>
</form>

$('#upload').submit(function(e) 
    e.preventDefault(); // stop the standard form submission

    $.ajax(
        url: this.action,
        type: this.method,
        data: new FormData(this),
        cache: false,
        contentType: false,
        processData: false,
        success: function (data) 
            console.log(data.UploadedFileCount + ' file(s) uploaded successfully');
        ,
        error: function(xhr, error, status) 
            console.log(error, status);
        
    );
);

public JsonResult Survey()

    for (int i = 0; i < Request.Files.Count; i++)
    
        var file = Request.Files[i];
        // save file as required here...
    
    return Json(new  UploadedFileCount = Request.Files.Count );

更多关于FormData at MDN的信息

【讨论】：

美丽。谢谢！我在几个问题上找到的最佳答案。

特地来这里寻找 jQuery 解决方案，看到标记为已回答的响应仅使用原生 javascript 有点失望。您的解决方案很棒，对我来说效果很好。非常感谢:)

请注意，如果您不选择文件，您似乎仍然会在数组中获得单个文件，ContentLength = 0

@Savage：在 2020 年测试 / chrome / asp net core mvc ：当您不选择任何内容时，文件为空。无论如何，答案是与 razor 和 MVC 控制器的非常干净的文件上传集成

【参考方案3】：

您不能通过 ajax 上传文件，您需要使用 iFrame 或其他一些技巧来进行完整的回发。这主要是出于安全考虑。

Here's a decent write-up including a sample project 使用史蒂夫·桑德森的 SWFUpload 和 ASP.Net MVC。这是我读到的第一篇文章，让我在 Asp.Net MVC 上正常工作（我当时也是 MVC 的新手），希望它对你有帮助。

【讨论】：

这不是真的；您可以通过 ajax 发送表单数据。

@kehrk：使用 HTML5 中新的 FormData 和 File 对象，您确实可以通过 AJAX 上传文件。试试这个：developer.mozilla.org/en-US/docs/….

【参考方案4】：

我在 vuejs 版本上有一个这样的示例：v2.5.2

<form action="url" method="post" enctype="multipart/form-data">
    <div class="col-md-6">
        <input type="file" class="image_0" name="FilesFront" ref="FilesFront" />
    </div>
    <div class="col-md-6">
        <input type="file" class="image_1" name="FilesBack" ref="FilesBack" />
    </div>
</form>
<script>
Vue.component('v-bl-document', 
    template: '#document-item-template',
    props: ['doc'],
    data: function () 
        return 
            document: this.doc
        ;
    ,
    methods: 
        submit: function () 
            event.preventDefault();

            var data = new FormData();
            var _doc = this.document;
            Object.keys(_doc).forEach(function (key) 
                data.append(key, _doc[key]);
            );
            var _refs = this.$refs;
            Object.keys(_refs).forEach(function (key) 
                data.append(key, _refs[key].files[0]);
            );

            debugger;
            $.ajax(
                type: "POST",
                data: data,
                url: url,
                cache: false,
                contentType: false,
                processData: false,
                success: function (result) 
                    //do something
                ,

            );
        
    
);
</script>

【讨论】：

该死的，我花了 2 天的大部分时间来解决这个问题，这里有一个解决方案。是否可以对表单进行模型绑定？

【参考方案5】：

如果您使用 ajax 发布表单，那么您不能 使用 $.ajax 方法发送图像， 你必须使用经典的 xmlHttpobject 方法来保存图像， 它的其他选择使用提交类型而不是按钮