ASP Net MVC剃须刀上传多个图像filelist

Question

我是ASP Net中的新手，我有一个图像列表，我想通过JavaScript发送到控制器。

我正在使用filelist，这就是一个示例。.create.cshtml

<div class="form-group">
    @Html.LabelFor(model => model.description, "Escolha as Imagens", htmlAttributes: new { @class = "control-label col-md-2" })
    <input id="files" type="file" name="files[]" />
    <br>
    <div id="preview"></div>
</div>
@section Scripts{
    <script type="text/javascript">
        function handleFileSelect(evt) {
            var files = evt.target.files;
            var f = files[0];
            //kiem tra co fai file anh
            if (f.type.match('image.*')) {
                var reader = new FileReader();
                reader.onload = (function(theFile) {
                    return function(e) {
                        var span = document.createElement('span');
                        span.innerHTML = [
                            '<img class="thumb" src="', e.target.result, '" title="', escape(theFile.name),
                            '"/><span class="remove_img_preview"></span>'
                        ].join('');
                        document.getElementById('preview').insertBefore(span, null);
                    };
                })(f);
                reader.readAsDataURL(f);
            }
        }
        $('#files').change(function(evt) {
            handleFileSelect(evt);
        });
        $('#preview').on('click',
            '.remove_img_preview',
            function() {
                $(this).parent('span').remove();
            });
        $('#btnSave').click(function() {
            $.ajax({
                url: '/Dishes/Create',
                data: { files: files },
                type: "POST",
                cache: false,
                datatype: "html",
                success: function(data) {
                    console.log(data);
                },
                error: function(jqXhr, textStatus, errorThrown) {
                    //do your own thing
                    alert("fail");
                }
            });
        });
    </script>
}
</fieldset>
<div class="form-group">
    <div class="footer text-center">
        <button class="btn btn-fill btn-info" name="btnSave" id="btnSave">Inserir novo</button>
    </div>
</div>

Controller.cs

public ActionResult Create()
    {
        ViewBag.idTypeDish = new SelectList(db.TypeDish, "idTypeDish", "name");
        return View();
    }

    // POST: Dishes/Create
    [HttpPost]
    public ActionResult Create(IEnumerable<HttpPostedFileBase> files)
    {

        return View();
    }

在控制器中，文件始终为空。我正在使用该示例，http://jsfiddle.net/lwczcaca6p/1/，我只是适应我的项目。

Answer 1

您遇到了一些问题。首先，您正在尝试将files与Ajax一起使用，但是该变量是在另一个功能的范围中定义的(即，您在这里无权访问它(。其次，当使用jQuery的$.ajax进行文件上传时，您需要将processData选项设置为false。这是我要处理的方法：

$('#MyForm').on('submit', function (e) {
    e.preventDefault();
    var formData = new FormData(this); // `this` is the form instance
    $.ajax({
        url: '/path/to/handler',
        type: 'POST',
        data: formData,
        processData: false,
        contentType: 'multipart/form-data',
        success: function (data, textStatus, jqXHR) {
            // do something on success
        },
        error: function (jqXHR, textStatus, errorThrown) {
            // do something on error
        }
    });
});

Answer 2

尝试一下，首先为您的视图创建模型：

public class FileModel  
{  
    [Required(ErrorMessage ="Please select file.")]  
    [Display(Name ="Browse File")]  
    public HttpPostedFileBase[] files { get; set; }  
}  

然后，对此进行编辑(为了启用许多文件，您需要在元素中添加多个="多个"(：

@model Models.FileModel
@using (Html.BeginForm("Create", "YourController", FormMethod.Post, new { enctype = "multipart/form-data" }))  
{  
    @Html.AntiForgeryToken()  
    <div class="form-horizontal">  
        <hr />  
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })  
        <div class="form-group">  
            @Html.LabelFor(model => model.files, htmlAttributes: new { @class = "control-label col-md-2" })  
            <div class="col-md-10">  
                @Html.TextBoxFor(model => model.files, "", new { @type = "file", @multiple = "multiple" })  
                @Html.ValidationMessageFor(model => model.files, "", new { @class = "text-danger" })  
            </div>  
        </div>  
        <div class="form-group">  
            <div class="col-md-offset-2 col-md-10">  
                <input type="submit"  value="Upload" class="btn btn-primary" />  
            </div>  
        </div>  
        </div>  
}