【转】利用Ajax.BeginForm提交文件

Ajax.BeginForm

 @using (Ajax.BeginForm("YourAction", "YourController", new AjaxOptions() { HttpMethod = "POST" }, new { enctype = "multipart/form-data"}))
{
    @Html.AntiForgeryToken()
    <input type="file" name="files"><br>
    <input type="submit" value="Upload File to Server">
}

Action Method

    [HttpPost]
    [ValidateAntiForgeryToken]
    public void YourAction(IEnumerable<HttpPostedFileBase> files)
    {
        if (files != null)
        {
            foreach (var file in files)
            {
                // Verify that the user selected a file
                if (file != null && file.ContentLength > 0)
                {
                    // extract only the fielname
                    var fileName = Path.GetFileName(file.FileName);
                    // TODO: need to define destination
                    var path = Path.Combine(Server.MapPath("~/Upload"), fileName);
                    file.SaveAs(path);
                }
            }
        }
    }

【引者注.有时加入 [ValidateAntiForgeryToken]注解会出错,具体原因不明,可删除这行注释】

Progress Bar

<div class="progress progress-striped">
        <div class="progress-bar progress-bar-success">0%</div>
    </div>

<div id="status"></div>

Jquery & Form script

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>

<script>
(function() {

var bar = $(‘.progress-bar‘);
var percent = $(‘.progress-bar‘);
var status = $(‘#status‘);

$(‘form‘).ajaxForm({
    beforeSend: function() {
        status.empty();
        var percentVal = ‘0%‘;
        bar.width(percentVal)
        percent.html(percentVal);
    },
    uploadProgress: function(event, position, total, percentComplete) {
        var percentVal = percentComplete + ‘%‘;
        bar.width(percentVal)
        percent.html(percentVal);
    },
    success: function() {
        var percentVal = ‘100%‘;
        bar.width(percentVal)
        percent.html(percentVal);
    },
    complete: function(xhr) {
        status.html(xhr.responseText);
    }
}); 

})();
</script>
时间: 11-30

【转】利用Ajax.BeginForm提交文件的相关文章

Asp.net Mvc Ajax.BeginForm提交表单

之前Mvc中一直用Html.BeginForm提交表单,即如下: @using (Html.BeginForm("Add", "News", FormMethod.Post, new { enctype = "multipart/form-data" })) { <table> <tr> <td><span style="color:red">*</span><

MVC Ajax.BeginForm 提交上传图片

吃水不忘挖井人,如果对你有帮助,请说声谢谢.如果你要转载,请注明出处.谢谢! 异步提交时,出现图片不能上传. 起初我定格在  System.Web.Mvc  中.查询源码时,也是没有问题的.那问题出现在哪 里? 答案:JS  jquery.unobtrusive-ajax.js 经查看,修改如下Demo: function asyncRequest(element, options) { var confirm, loading, method, duration, enctype, is_as

Asp.net MVC利用Ajax.BeginForm实现bootstrap模态框弹出,并进行前段验证

1.新建Controller public ActionResult Index() { return View(); } public ActionResult Person(int? id) { //could add code here to get model based on id.... return PartialView("_Person"); //calling partial with existing model.... //return PartialView(

Mvc利用Html.BeginForm 提交表单代码详解

js验证表单数据合法性代码 $(function () { $("#btnApplication").click(function () { var imageurl = $("#SXtPhoto").val(); var desc = $("#tDesc").val(); var type = $("#type").val(); if (imageurl == "") { alert("请上传照

利用ajax.dll类库文件实现无刷新

使用这种方法前需要配置相应的环境 1.引用ajax.dll文件 2.在web.config添加如下: <httpHandlers>   <add path="ajax/*.ashx" verb="POST,GET" type="Ajax.PageHandlerFactory, Ajax"/>   <!--<add path="ajaxpro/*.ashx" verb="POST,G

ajax异步提交文件

首先 下载jquery和jquery.form.js   http://malsup.com/jquery/form/ <script type="text/javascript" src="jquery/jquery.js"></script></head><script type="text/javascript" src="jquery/jquery.form.js">&l

MVC Ajax.BeginForm重复提交解决方法

mvc使用MVC Ajax.BeginForm提交的时候有重复提交结果的时候检查相关js文件引用情况, 其中mvc4注意 1 2 3 4 @Scripts.Render("~/bundles/modernizr") bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(                        "~/Scripts/jquery.unobtrusive*",

关于MVC Ajax.BeginForm()异步上传文件的问题

问题描述: 如果用juqery原生的异步上传方式,只要如下方法即可 $.ajax({ type: "GET", url: "test.json", data: {username:$("#username").val(), content:$("#content").val()}, dataType: "json", success: function(data){ alert("");

Ajax.BeginForm表单重复提交

今晚在做模块开发的时候,页面的js引用会导致重复: 今晚,在检查一个已经写好的表单的时候,发现Ajax.BeginForm,会重复提交表单,post方法能执行好几次,这个时候,建议大家去检查下,父页面,或者子页面的js引用的文件,有没有重复引用“jquery.unobtrusive-ajax.js” 或者是min的: 虽然说的不是很多,就是希望大家,别像我一样粗心: