asp.net-mvc-3 - mvc 3でajaxを使用したビデオファイルのアップロード

Question

プロジェクトでビデオ形式をアップロードするにはどうすればよいですか。画像をアップロードするのと同じですか? 画像はアップロードできますが、動画はアップロードできません。任意のヒント？ありがとうございました。

以下のコードを使用して画像をアップロードできると言ったので、質問を更新します。私の問題は、ビデオを同時に他のデータと一緒にアップロードする方法です。

@model BookingCMS.Models.Booking

@{
    ViewBag.Title = "Index";
    //Layout = "~/Views/Shared/_Layout.cshtml";
}
<script src="@Url.Content("~/Scripts/jquery-1.7.2.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.fileupload.js")" type="text/javascript"></script>
<link href="@Url.Content("~/Content/jquery.fileupload-ui.css")" rel="stylesheet" type="text/css" />
<br />
<br />

<fieldset>
    <legend>
        <h2>
            Add Movie</h2>
    </legend>
    <br />
    <table id="table-2">
        <tbody>
            <tr>
                <td>
                    Movie Name
                </td>
                <td>@Html.TextBoxFor(model => model.MovieName, new { @class = "editor-field" })
                </td>
            </tr>
            <tr>
                <td>
                    Status
                </td>
                <td>@Html.CheckBoxFor(model => model.Status)
                </td>
            </tr>
            <tr>
                <td>
                    Showing Type
                </td>
                <td>@Html.DropDownList("ShowingTypes", ViewBag.ShowingType as IEnumerable<SelectListItem>, "Select Type")
                </td>
            </tr>
            <tr>
                <td>
                    Movie Codes
                </td>
                <td>
                    <input class="checkbox" type="checkbox" id="SC" />
                    <label class="label">
                        Standard Cinema</label>
                    &nbsp;@Html.TextBoxFor(model => model.StandardCinema, new { @class = "textbox" })
                    <br />
                    <input class="checkbox" type="checkbox" id="I2D" />
                    <label class="label">
                        IMAX2D</label>
                    &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; @Html.TextBoxFor(model => model.Imax2D, new { @class = "textbox" })
                    <br />
                    <input class="checkbox" type="checkbox" id="I3D" />
                    <label class="label">
                        IMAX 3D</label>
                    &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp; @Html.TextBoxFor(model => model.Imax3D, new { @class = "textbox" })
                    <br />
                    <input class="checkbox" type="checkbox" id="DC" />
                    <label class="label">
                        Directors Club</label>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; @Html.TextBoxFor(model => model.DirectorsClub, new { @class = "textbox" })
                    <br />
                    <input class="checkbox" type="checkbox" id="DT2D" />
                    <label class="label">
                        Digital Theatre 2D</label>
                    @Html.TextBoxFor(model => model.DigitalTheatre2D, new { @class = "textbox" })
                    <br />
                    <input class="checkbox" type="checkbox" id="DT3D" />
                    <label class="label">
                        Digital Theatre 3D</label>
                    @Html.TextBoxFor(model => model.DigitalTheatre3D, new { @class = "textbox" })
                </td>
            </tr>
            <tr>
                <td>
                    Cast
                </td>
                <td>@Html.TextBoxFor(model => model.Cast, new { @class = "editor-field" })
                </td>
            </tr>
            <tr>
                <td>
                    Rating
                </td>
                <td>@Html.TextBoxFor(model => model.Rating, new { @class = "editor-field" })
                </td>
            </tr>
            <tr>
                <td>
                    Genre
                </td>
                <td>@Html.TextBoxFor(model => model.Genre, new { @class = "editor-field" })
                </td>
            </tr>
            <tr>
                <td>
                    Cinexclusive
                </td>
                <td>@Html.CheckBoxFor(model => model.Cinexclusive)
                </td>
            </tr>
            <tr>
                <td>
                    Blurb
                </td>
                <td>@Html.TextAreaFor(model => model.Blurb, new { style = "width:500px; height: 150px" })
                </td>
            </tr>
            <tr>
                <td>
                    Synopsis
                </td>
                <td>@Html.TextAreaFor(model => model.Synopsis, new { style = "width:500px; height: 150px" })
                </td>
            </tr>
            <tr>
                <td>
                    Poster Homepage
                </td>
                <td style>
                    <form id="file_upload" action="/Movies/UploadFiles" method="POST" enctype="multipart/form-data">
                    <div class="fileupload-buttonbar">
                        @*<div class="progressbar fileupload-progressbar">
                        </div>*@
                        <div id="file_name">
                        </div>
                        <div id="file_type">
                        </div>
                        <div id="file_size">
                        </div>
                        <div id="show_image"></div>
                        <span class="fileinput-button"><a href="javascript:void(0)" class="upload-image">
                            Upload image</a>
                            <input type="file" name="files[]" multiple id="file" />
                        </span>
                    </div>
                    </form>
                    @*@Html.TextBox("PosterHomepage", (string)ViewBag.PosterHomepage, new { @class = "editor-field" })*@
                </td>
            </tr>
            <tr>
                <td>
                    Running Time
                </td>
                <td>@Html.TextBoxFor(model => model.RunningTime, new { @class = "editor-field" })
                </td>
            </tr>
            <tr>
                <td>
                    Trailer
                </td>
                <td>@Html.TextBoxFor(model => model.Trailer, new { @class = "editor-field" }) @*Here is my problem ..how can I upload video with some other data*@
                </td>
            </tr>
        </tbody>
    </table>
    <br />
    <div style="float: left">
        <input type="button" id="btnAdd" value="Add" />
        <input type="button" id="btnCancel" value="Cancel" />
    </div>
</fieldset>
<script type="text/javascript">
    $(document).ready(function () {
        $('.progressbar').progressbar({ value: 0 });

        $('#file_upload').fileupload({
            dataType: 'json',
            url: '/Movies/UploadFiles',
            progressall: function (e, data) {
                $(this).find('.progressbar').progressbar({ value: parseInt(data.loaded / data.total * 100, 10) });
            },
            done: function (e, data) {
                $('#file_name').html(data.result.name);
                $('#file_type').html(data.result.type);
                $('#file_size').html(data.result.size);
                $('#show_image').html('<img src="/home/image/' + data.result.name + '" />');
                $('#file_name').css({ display: 'none' });
                $('#file_type').css({ display: 'none' });
                $('#file_size').css({ display: 'none' });
                //visibility: hidden;
                $(this).find('.progressbar').progressbar({ value: 100 });
            }
        });
    });

    $('#StandardCinema').hide();
    $('#Imax2D').hide();
    $('#Imax3D').hide();
    $('#DirectorsClub').hide();
    $('#DigitalTheatre2D').hide();
    $('#DigitalTheatre3D').hide();

    $('#SC').click(function () {
        var check = $("#SC").is(':checked');//.attr('checked');
        if (check == true) {
            $('#StandardCinema').show();
            $('#StandardCinema').focus();
        }
        else {
            $('#StandardCinema').hide();
        }
    });
    $('#I2D').click(function () {
        var check = $("#I2D").is(':checked');
        if (check == true) {
            $('#Imax2D').show();
            $('#Imax2D').focus();
        }
        else {
            $('#Imax2D').hide();
        }
    });
    $('#I3D').click(function () {
        var check = $("#I3D").is(':checked');
        if (check == true) {
            $('#Imax3D').show();
            $('#Imax3D').focus();
        }
        else {
            $('#Imax3D').hide();
        }
    });
    $('#DC').click(function () {
        var check = $("#DC").is(':checked');
        if (check == true) {
            $('#DirectorsClub').show();
            $('#DirectorsClub').focus();
        }
        else {
            $('#DirectorsClub').hide();
        }
    });
    $('#DT2D').click(function () {
        var check = $("#DT2D").is(':checked');
        if (check == true) {
            $('#DigitalTheatre2D').show();
            $('#DigitalTheatre2D').focus();
        }
        else {
            $('#DigitalTheatre2D').hide();
        }
    });
    $('#DT3D').click(function () {
        var check = $("#DT3D").is(':checked');
        if (check == true) {
            $('#DigitalTheatre3D').show();
            $('#DigitalTheatre3D').focus();
        }
        else {
            $('#DigitalTheatre3D').hide();
        }
    });

    $('#btnAdd').click(function () {
        var e = document.getElementById("file_name");
        var content = e.innerHTML;
        //alert(content);
        var _MovieName = $('#MovieName').val();
        var _Active = $('#Status').val();
        var _ShowingTypes = $('#ShowingTypes :selected').val();
        var _ShowingTypesText = $('#ShowingTypes :selected').text();
        var _Cast = $('#Cast').val();
        var _Rating = $('#Rating').val();
        var _Blurb = $('#Blurb').val();
        var _Synopsis = $('#Synopsis').val();
        var _RunningTime = $('#RunningTime').val();
        var _Genre = $('#Genre').val();
        var _Cinexclusive = $('#Cinexclusive');
        var _Trailer = $('#Trailer').val();
        var _PosterHomepage = content;

        var _SC = $('#StandardCinema').val();
        var _I2D = $('#Imax2D').val();
        var _I3D = $('#Imax3D').val();
        var _DC = $('#DirectorsClub').val();
        var _DT2D = $('#DigitalTheatre2D').val();
        var _DT3D = $('#DigitalTheatre3D').val();
        var isSC = $("#SC").attr('checked') ? true : false;
        var isI2D = $("#I2D").attr('checked') ? true : false;
        var isI3D = $("#I3D").attr('checked') ? true : false;
        var isDC = $("#DC").attr('checked') ? true : false;
        var isDT2D = $("#DT2D").attr('checked') ? true : false;
        var isDT3D = $("#DT3D").attr('checked') ? true : false;
        var isActive = $('#Status').attr('checked') ? true : false;
        var isCinex = $('#Cinexclusive').attr('checked') ? true : false;

        if (_ShowingTypesText == "Select Type") {
            alert("Showing Type is required.");
            return false;
        }

        if (isSC == true & _SC == "") {
            alert("Standard Cinema was selected! Movie code is required.");
            $('#StandardCinema').focus();
            return false;
        }

        if (isI2D == true & _I2D == "") {
            alert("IMAX 2D was selected! Movie code is required.");
            $('#Imax2D').focus();
            return false;
        }

        if (isI3D == true & _I3D == "") {
            alert("IMAX 3D was selected! Movie code is required.");
            $('#Imax3D').focus();
            return false;
        }

        if (isDC == true & _DC == "") {
            alert("Director's Club was selected! Movie code is required.");
            $('#DirectorsClub').focus();
            return false;
        }

        if (isDT2D == true & _DT2D == "") {
            alert("Digital Theatre 2D was selected! Movie code is required.");
            $('#DigitalTheatre2D').focus();
            return false;
        }

        if (isDT3D == true & _DT3D == "") {
            alert("Digital Theatre 3D was selected! Movie code is required.");
            $('#DigitalTheatre3D').focus();
            return false;
        }

        var postData = {
            moviename: _MovieName,
            status: isActive,
            showingtype: _ShowingTypes,
            cast: _Cast,
            rating: _Rating,
            genre: _Genre,
            cinexclusive: isCinex,
            blurb: _Blurb,
            synopsis: _Synopsis,
            runningtime: _RunningTime,
            trailer: _Trailer,
            posterhompage: _PosterHomepage,
            sc: _SC,
            i2d: _I2D,
            i3d: _I3D,
            dc: _DC,
            dt2d: _DT2D,
            dt3d: _DT3D
        };
        $.ajax({
            type: "POST",
            url: "/Movies/CreateMovie",
            dataType: "json",
            traditional: true,
            data: postData,
            cache: false,
            success: function (data) {
                if (data.Result == "Success") {
                    jAlert(data.Message, "Notification", function () {
                        window.location = '/Home/Index';
                    });
                }
                else
                    jAlert(data.Message, "Notification"); //, function () {
                //$('#code').focus();
                //});
            }
        });
    });

    $("#btnCancel").click(function () {
        window.location = "/Home/Index/";
    });
</script>

コントローラ：

 public FilePathResult Image()
        {
            string filename = Request.Url.AbsolutePath.Replace("/home/image", "");
            string contentType = "";
            var filePath = new FileInfo(Server.MapPath("~/Images") + filename);

            var index = filename.LastIndexOf(".") + 1;
            var extension = filename.Substring(index).ToUpperInvariant();

            // Fix for IE not handling jpg image types
            contentType = string.Compare(extension, "JPG") == 0 ? "image/jpeg" : string.Format("image/{0}", extension);

            return File(filePath.FullName, contentType);
        }

        [HttpPost]
        public ContentResult UploadFiles()
        {
            var r = new List<UploadHomePage>();

            foreach (string file in Request.Files)
            {
                HttpPostedFileBase image = Request.Files[file] as HttpPostedFileBase;
                if (image.ContentLength == 0)
                    continue;
                string savedFileName = Path.Combine(Server.MapPath("~/Images"), Path.GetFileName(image.FileName));
                image.SaveAs(savedFileName);

                r.Add(new UploadHomePage()
                {
                    Name = image.FileName,
                    Length = image.ContentLength,
                    Type = image.ContentType
                });
            }
            ViewBag.PosterHomepage = Path.Combine(Server.MapPath("~/Images"), Path.GetFileName(r[0].Name));

            return Content("{\"name\":\"" + r[0].Name + "\",\"type\":\"" + r[0].Type + "\",\"size\":\"" + string.Format("{0} bytes", r[0].Length) + "\"}", "application/json");
        }

        [HttpPost]
        public ActionResult CreateMovie(string moviename, bool status, int showingtype, string cast, string rating, string genre, bool cinexclusive, string blurb, string synopsis, string runningtime, string trailer, string posterhompage, string sc, string i2d, string i3d, string dc, string dt2d, string dt3d)
        {
            try
            {
                //Saving process

                if (_WebResult.Result == 0)
                {
                    return Json(new { Result = "Success", Message = _WebResult.Message.ToString() });
                }
                else
                {
                    return Json(new { Result = "Error", Message = _WebResult.Message.ToString() });
                }
            }
            catch (Exception)
            {

                return Json(new { Result = "Error", Message = "" + " failed to save." });
            }
        }