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

Question

您好，我尝试将图像路径保存在我的数据库中并将其检索到我的视图中以使用下面的代码显示图像。哪个运行完美。我现在的问题是如何使用 ajax 保存视频文件？我使用 ajax 是因为我不仅要保存图像，还要保存不同的数据。例如名称、代码、简介、概要等。提前感谢您对我的帮助。

在我看来：

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

Answer 1

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

$('#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) {
        ...
    }
});