Jquery 使用MVC4和Ajax上传文件_Jquery_Ajax_Asp.net Mvc_Asp.net Mvc 4

Jquery 使用MVC4和Ajax上传文件

jquery ajax asp.net-mvc asp.net-mvc-4

Jquery 使用MVC4和Ajax上传文件,jquery,ajax,asp.net-mvc,asp.net-mvc-4,Jquery,Ajax,Asp.net Mvc,Asp.net Mvc 4,我正在使用MVC4+VS2012+Framework4.5开发web应用程序我有三个局部视图，它们在基于用户操作的索引页上动态呈现在三个局部视图中，有一个局部视图具有上载文件的功能，其中包含一些输入字段，如文本框问题: 当用户单击“保存”按钮时（该按钮出现在局部视图本身上）。我想将输入字段保存到我的数据库中，并将上载的文件存储在共享文件夹中我想用Ajax实现这一点（上传文件并保存数据后，用户应该在同一个视图上）如何实现相同的功能？JQuery解决方案就可以了我尝试过使用@Ajax.B

我正在使用MVC4+VS2012+Framework4.5开发web应用程序

我有三个局部视图，它们在基于用户操作的索引页上动态呈现

在三个局部视图中，有一个局部视图具有上载文件的功能，其中包含一些输入字段，如文本框

问题:

当用户单击“保存”按钮时（该按钮出现在局部视图本身上）。我想将输入字段保存到我的数据库中，并将上载的文件存储在共享文件夹中

我想用Ajax实现这一点（上传文件并保存数据后，用户应该在同一个视图上）

如何实现相同的功能？JQuery解决方案就可以了

我尝试过使用

@Ajax.BeginForm

，但在上传文件后，会出现完整的回发。

本文帮助了我：

ActionResult仍然是

ActionResult上载（HttpPostedFileBase文件）{…}

本文帮助了我：

ActionResult仍然是

ActionResult上载（HttpPostedFileBase文件）{…}

这是我的小工作示例，它上载多个文件并上载到一个名为“垃圾邮件”的文件夹中

客户端….

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

    }
}


上传示例
$（文档）.ready（函数（）{
$（“#上载”）。单击（函数（）{
var formData=new formData（）；
var totalFiles=document.getElementById（“FileUpload”）.files.length；
对于（var i=0；i


服务器端……
    <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 );    
        }

    }
}

公共类HomeController:控制器
{
[HttpPost]
公共无效上载（）
{
对于（int i=0；i
这是我的小工作示例，它上载多个文件并上载到一个名为“垃圾邮件”的文件夹中
客户端….
    <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 );    
        }

    }
}


上传示例
$（文档）.ready（函数（）{
$（“#上载”）。单击（函数（）{
var formData=new formData（）；
var totalFiles=document.getElementById（“FileUpload”）.files.length；
对于（var i=0；i

服务器端……
    <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 );    
        }

    }
}

公共类HomeController:控制器
{
[HttpPost]
公共无效上载（）
{
对于（int i=0；i
[HttpPost]
公共无效上载（）
{
对于（int i=0；i
[HttpPost]
公共无效上载（）
{
对于（int i=0；i
HTML5可能不受早期/旧浏览器的支持。请推荐一些支持旧浏览器的东西。早期/旧浏览器可能不支持HTML5的副本。请建议一些支持旧浏览器的东西。可能是惊人工作的重复-我已经试了几个月来让它工作。非常感谢！您的代码成功上载了文件，但我总是得到“error”。我的问题是如何将控制器的响应发送到ajax调用？谢谢@shadi1024返回成功结果更改上载操作方法签名以返回ActionResult，然后返回Json结果，例如返回Json（new{result=“some_info”}）；伙计，真希望我早点发现这个！网上最好的答案！惊人的工作-我已经试了几个月来让这个工作。非常感谢！您的代码成功上载了文件，但我总是得到“error”。我的问题是如何将控制器的响应发送到ajax调用？谢谢@shadi1024返回成功结果更改Upload action方法签名以返回ActionResult，然后返回Json结果，例如retur