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

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

1 个答案: