jquery - File upload using MVC 4 with Ajax

Question

Welcome To Ask or Share your Answers For Others

jquery - File upload using MVC 4 with Ajax

posted Oct 17, 2021 in Technique[技术] by 深蓝 (71.8m points)

jquery - File upload using MVC 4 with Ajax

I am developing web application using MVC 4 + VS 2012 + Framework 4.5.

I have three partial views, which are rendering dynamically, on my index page based on user action.

Out of three partial views, one partial view has Upload File functionality with some entry fields like textboxes.

Problem:

When user click on save button (which is present on the partial view itself). I want to save entry field into my database and stored uploaded file on shared folder.

I want to implement this using Ajax (After uploading the file and save data, user should be on the same view).

How can I implement the same? JQuery solution would be fine.

I have tried with @Ajax.BeginForm but after uploading of file, full post back happen.

Question&Answers:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-10-16T22:33:27+0000

Here is my small working sample, which uploads multiple files and uploads in a folder called as 'junk'

Client Side....

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

Server Side....

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

    }
}

Categories

jquery - File upload using MVC 4 with Ajax

jquery - File upload using MVC 4 with Ajax

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags