web-dev-qa-db-ja.com

MVC 4とAjaxを使用したファイルのアップロード

MVC 4 + VS 2012 + Framework 4.5を使用してWebアプリケーションを開発しています。

ユーザーアクションに基づいてインデックスページに3つの部分ビューが動的にレンダリングされます。

3つの部分ビューのうち、1つの部分ビューにはUpload Fileテキストボックスのようないくつかの入力フィールドを持つ機能。

問題：

ユーザーが保存ボタン（部分ビュー自体にある）をクリックしたとき。入力フィールドをデータベースに保存し、アップロードしたファイルを共有フォルダーに保存します。

Ajaxを使用してこれを実装します（ファイルをアップロードしてデータを保存した後、ユーザーは同じビューにいる必要があります）。

同じことをどのように実装できますか？ JQueryソリューションは問題ありません。

私は@Ajax.BeginFormしかし、ファイルのアップロード後、完全なポストバックが発生します。

jqueryajaxasp.net-mvcasp.net-mvc-4
18
sanjay jadam

複数のファイルをアップロードし、「ジャンク」と呼ばれるフォルダーにアップロードする小さな作業サンプルを次に示します。

クライアント側...

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

    }
}
72
Uthaiah