使用mvc 3中的ajax上传视频文件

时间:2013-03-20 08:39:19

标签: asp.net-mvc-3 video upload

如何在项目中上传任何视频格式。是否与上传图片相同?,因为我可以上传图片,但我无法上传任何视频。有小费吗?谢谢。

我更新了我的问题,因为我说我可以使用下面的代码上传图片,我的问题是如何同时上传视频和其他一些数据。

@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." });
            }
        }

0 个答案:

没有答案