使用jquery post发送文件而不刷新页面mvc

时间:2014-04-08 19:16:37

标签: jquery ajax asp.net-mvc razor

我想在没有页面刷新的情况下使用jQuery发布带有AJAX的文件,但我有一个问题。

我在jquery中遇到此错误:Uncaught TypeError: Illegal invocation

HTML

<table id="tblQuadrupletRange" >***

    <tr>
        <td >
            <input id="QuadrupletRangeFile" name="QuadrupletRangeFile" type="file" /></td>
    </tr>
    <tr>
        <td colspan="7">
            <a href="#" id="InsertQR">Insert</a>
        </td>
    </tr>
</table>

的Javascript

<script type="text/javascript" src="../../Scripts/jquery-1.10.2.min.js"></script>
$(document).on('click', "#InsertQR", function (e) {
    var url = '@Url.Action("SetQuadrupletRangeList")';

    var photo = document.getElementById("QuadrupletRangeFile");
    var file = photo.files[0];
    $.post(url, { file:file }, function (data) {
        if (data == "True") {
            //do something
        }
    });}
);

控制器C#代码

[HttpPost]
public void SetQuadrupletRangeList( HttpPostedFileBase file)
{    
    HttpPostedFileBase objpostFile = file;  
}

2 个答案:

答案 0 :(得分:3)

帖子必须用ajax调用替换,并按如下方式更新:

data = new FormData();
data.append('file', file);
$.ajax({
    url: url,
    data: data,
    enctype: 'multipart/form-data',
    processData: false,  // do not process the data as url encoded params
    contentType: false   // by default jQuery sets this to urlencoded string
    type: 'POST',
    success: function ( data ) {
       alert( data );
    }
});

来自jQuery docs:

  

processData(默认值:true)类型:Boolean默认情况下,传入的数据   作为对象的数据选项(从技术上讲,除了一个以外的任何东西)   string)将被处理并转换为查询字符串,拟合   到默认的内容类型&#34; application / x-www-form-urlencoded&#34;。如果   要发送DOMDocument或其他未处理的数据,请设置此项   选项为false。

答案 1 :(得分:1)

您的表单编码类型是enctype = "multipart/form-data"