使用Ajax在MVC 3中上传视频文件 [英] Video file upload in mvc 3 using ajax

问题描述

我尝试将图像路径保存在数据库中，并使用以下代码将其检索到视图中以显示图像.哪个运行完美.我现在的问题是如何使用Ajax保存视频文件?我使用ajax是因为我不仅要保存图像，而且要保存其他数据.例如名称，代码，模糊，简介等.在此先感谢您的帮助.

Hi I tried to save image path in my database and retrieve it to my view to display image using the code below. Which is running perfectly. My problem now is how can I save video file using ajax? I used ajax because I'm not only saving images but I also have different data to save. e.g Name,code,blurb,synopsis etc. Thank you in advance for helping me.

在我看来:

<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>
                </td>
            </tr>

脚本

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

控制器:

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

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

型号:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace BookingCMS.Models
{
    public class UploadHomePage
    {
        public string Name { get; set; }
        public int Length { get; set; }
        public string Type { get; set; }
    }
}

推荐答案

您可以使用formData设置通过FileUpload插件传递其他参数:

You could pass additional parameters with the FileUpload plugin using the formData setting:

$('#file_upload').fileupload({
    dataType: 'json',
    url: '/Movies/UploadFiles',
    formData : { 
        name: 'this is the name of the movie', 
        synopsis: 'this is the synopsis of the movie',
        type: 'movie'
    },
    progressall: function (e, data) {
        ...
    },
    done: function (e, data) {
        ...
    }
});

这篇关于使用Ajax在MVC 3中上传视频文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！