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

我的视图中有一个文件

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

$.ajax({
url:“”，
数据类型：“json”，
processData:false，
contentType:“多部分/混合”，
数据：{
Id:selectedRow.Id，
值：“用户在此处添加了一些日期：）”
},
cache:false，
成功：函数（数据）{}
});

---

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

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

使用SteveSanderson的SWFUpload和ASP.NETMVC。这是我在Asp.NETMVC上读到的第一件使它正常工作的东西（当时我也是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;
}   

document.getElementById（'uploader'）。onsubmit=function（）{
var formdata=new formdata（）；//formdata对象
var fileInput=document.getElementById（'fileInput'）；
//遍历fileInput中选定的每个文件
对于（i=0；i

控制器

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");
}

publicjsonresult上传（）
{
对于（int i=0；i

编辑：HTML

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

---

如果使用ajax发布表单，则无法 使用$.ajax方法发送图像， 必须使用经典的xmlHttpobject方法保存图像，

---

它的其他替代方法是使用提交类型而不是按钮，现在可以通过将

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>

publicjsonresult调查（）
{
对于（int i=0；i

---

有关

的详细信息我在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>

Vue.组件（“v-bl-document”{
模板：“#文档项模板”，
道具：['doc']，
数据：函数（）{
返回{
文档：this.doc
};
},
方法：{
提交：函数（）{
event.preventDefault（）；
var data=new FormData（）；
var _doc=本文件；
Object.keys（_doc）.forEach（函数（键）{
data.append（key，_doc[key]）；
});
var _refs=此。$refs；
Object.keys（_refs）.forEach（函数（键）{
data.append（key，_refs[key].files[0]）；
});
调试器；
$.ajax({
类型：“POST”，
数据：数据，
url:url，
cache:false，
contentType:false，
processData:false，
成功：功能（结果）{
//做点什么
},
});
}
}
});

json无法上传这样的文件。最好使用浏览器的默认上传行为；您可以通过ajax发送表单数据。@JoshM。是的，但是如果没有某种外部解决方案，你不能通过AJAX发送文件。@kehrk：有了HTML5中新的FormData和文件对象，你确实可以通过AJAX上传文件。尝试以下操作：。是否可以为视图添加代码？HTML。。回答这个问题。很好的博客Ajeesh！谢谢您好，有没有办法将上传的文件绑定到模型中？这在IE中不起作用。IE在file.FileName参数中传递用户的完整本地路径，因此您需要path.GetFileName（file.FileName）以确保安全。否则答案就太棒了。这是一个很大的帮助，谢谢。这个答案中的链接（以及评论中的另一个链接）被打断了。非常感谢。我在几个问题上找到了最好的答案。我来这里是专门寻找jQuery解决方案的，看到标记为已回答的响应只使用了普通JavaScript，我有点失望。你的解决方案很好，对我来说非常有效。非常感谢：）请注意，如果不选择文件，数组中似乎仍有一个文件，ContentLength=0@Savage：在2020年测试/chrome/asp net core mvc:当您不选择任何内容时，文件为空。无论如何，答案是与razor和MVC控制器进行真正干净的文件上传集成该死的，我花了两天的大部分时间来思考这个问题，这里有一个解决方案。但是可以对表单进行模型绑定吗？