jquery – 使用MVC 4与Ajax进行文件上传

前端之家收集整理的这篇文章主要介绍了jquery – 使用MVC 4与Ajax进行文件上传前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在使用MVC 4 VS 2012 Framework 4.5开发Web应用程序.

我有三个部分视图,它们是动态呈现在我的索引页面上,基于用户操作.

在三个部分视图中,一个部分视图具有上传文件功能和一些输入字段(如文本框).

问题:

用户单击保存按钮(它在部分视图本身存在)时.我想将输入字段保存到我的数据库中,并将上传文件存储在共享文件夹中.

我想使用Ajax实现这一点(上传文件并保存数据后,用户应该在同一个视图中).

如何实现相同? JQuery解决方案会很好.

我已经尝试过@ Ajax.BeginForm,但上传文件后,完全发回.

解决方法

这是我的小工作示例,它上传了多个文件,并将其上传到名为“垃圾”的文件夹中

客户端….

<html>
    <head>
    <title>Upload Example</title>
    <script src="~/Scripts/jquery-2.1.0.intellisense.js"></script>
    <script src="~/Scripts/jquery-2.1.0.js"></script>
    <script src="~/Scripts/jquery-2.1.0.min.js"></script>
    <script>
    $(document).ready(function () {
        $("#Upload").click(function () {
            var formData = new FormData();
            var totalFiles = document.getElementById("FileUpload").files.length;
            for (var i = 0; i < totalFiles; i++)
            {
                var file = document.getElementById("FileUpload").files[i];

                formData.append("FileUpload",file);
            }
            $.ajax({
                type: "POST",url: '/Home/Upload',data: formData,dataType: 'json',contentType: false,processData: false,success: function (response) {
                    alert('succes!!');
                },error: function (error) {
                    alert("errror");
                }
            });
        });
    });

</script>
</head>
<body>
    <input type="file" id="FileUpload" multiple />
    <input type="button" id="Upload" value="Upload" />
</body>
</html>

服务器端….

public class HomeController : Controller
{
    [HttpPost]
    public void Upload( )
    {
        for( int i = 0 ; i < Request.Files.Count ; i++ )
        {
            var file = Request.Files[i];

            var fileName = Path.GetFileName( file.FileName );

            var path = Path.Combine( Server.MapPath( "~/Junk/" ),fileName );
            file.SaveAs( path );    
        }

    }
}

猜你在找的jQuery相关文章