jquery – Ajax.BeginForm在MVC中上传文件

前端之家收集整理的这篇文章主要介绍了jquery – Ajax.BeginForm在MVC中上传文件前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我试图使用这里提到的示例 How to do a ASP.NET MVC Ajax form post with multipart/form-data?

但我不断收到“失败”的错误信息框

Index.cshtml

<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
<h2>Files Upload</h2>
<script type="text/javascript">
$(function() {
    $("#form0").submit(function(event) {
        var dataString;
        event.preventDefault();
        var action = $("#form0").attr("action");
        if ($("#form0").attr("enctype") == "multipart/form-data") {
            //this only works in some browsers.
            //purpose? to submit files over ajax. because screw iframes.
            //also,we need to call .get(0) on the jQuery element to turn it into a regular DOM element so that FormData can use it.
            dataString = new FormData($("#form0").get(0));
            contentType = false;
            processData = false;
        } else {
            // regular form,do your own thing if you need it
        }
        $.ajax({
            type: "POST",url: action,data: dataString,dataType: "json",//change to your own,else read my note above on enabling the JsonValueProviderFactory in MVC
            contentType: contentType,processData: processData,success: function(data) {
                //BTW,data is one of the worst names you can make for a variable

            },error: function(jqXHR,textStatus,errorThrown) {
                //do your own thing
                alert("fail");
            }
        });
    }); //end .submit()
});
</script>
<div id="uploadDiv">
@Html.Action("Files","Home")
</div>

@using (Ajax.BeginForm("Files","Home",new AjaxOptions { UpdateTargetId = "uploadDiv",HttpMethod = "Post" },new { enctype = "multipart/form-data",@id="form0"}))
{
<div>
    <div>Upload new file:
        <input type="file" name="file" /></div>
    <input type="submit" value="Save" />
</div>
}
<br />

控制器

public PartialViewResult Files(HttpPostedFileBase file)
    {
        IEnumerable<string> files;
        if ((file != null) && (file.ContentLength > 0))
        {
            string fileName = file.FileName;
            string saveLocation = @"D:\Files";
            string fullFilePath = Path.Combine(saveLocation,fileName);               


            try
            {
                file.SaveAs(fullFilePath);
                FileInfo fileInfo = new FileInfo(fullFilePath);
                file.InputStream.Read(new byte[fileInfo.Length],file.ContentLength);                    
            }
            catch (Exception e)
            {
                TempData["FileUpload"] = e.Message;
                return PartialView();
            }
            files = Directory.GetFiles(@"D:\Files\");
            return PartialView(files);
        }
        else
        {
            files = Directory.GetFiles(@"D:\Files\");
            return PartialView(files);
        }
    }

Files.cshtml

@model IEnumerable<string>

@foreach (string f in Model)
{
<p>@f</p>
}

Global.asax

ValueProviderFactories.Factories.Add(new JsonValueProviderFactory());

解决方法

这是复杂更好使用 jquery forms plugin

下面是示例:

Html.BeginForm

@using (Html.BeginForm("YourAction","YourController"))
{
    @Html.AntiForgeryToken()
    <input type="file" name="files"><br>
    <input type="submit" value="Upload File to Server">
}

操作方法

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

进度条

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

Jquery&表单脚本

<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>

更新…

有两次调用动作方法的问题的人是由于Ajax.BeginForm,只是将其转换为Html.BeginForm()。有关更多说明和下载示例代码,请参阅this blog

原文链接:https://www.f2er.com/jquery/184093.html

猜你在找的jQuery相关文章