Question

我一直在努力让这个blueimp的文件上传代码正常工作。有很多可用的例子，但没有一个使用MVC剃须刀。

我的bundleconfig.cs和_layout共享视图中包含了所有必需的css和js文件。

有没有人做过类似于我想要完成的事情？

查看

<!-- The fileinput-button span is used to style the file input field as button -->
<form class="form-horizontal" method="post" 
  action="/Account/UserProfilePic" id="ProfilePicForm" 
  name="ProfilePicForm" enctype="multipart/form-data">
     <span class="btn btn-success fileinput-button">
       <i class="glyphicon glyphicon-plus"></i>
       <span>Select files...</span>
       <!-- The file input field used as target for the file upload widget -->
       <input id="fileupload" type="file" name="files[]" multiple>
       </span>
     <br>
     <br>
       <!-- The global progress bar -->
       <div id="progress" class="progress">
        <div class="progress-bar progress-bar-success"></div>
       </div>
       <!-- The container for the uploaded files -->
       <div id="files" class="files"></div>
</form>
<br>

$(function () {
    'use strict';
    var url = '/Account/UploadProfilePic';
    $('#fileupload').fileupload({
        url: url,
        dataType: 'json',
        done: function (e, data) {
            $.each(data.result.files, function (index, file) {
                $('<p/>').text(file.name).appendTo('#files');
            });
        },
        progressall: function (e, data) {
            var progress = parseInt(data.loaded / data.total * 100, 10);
            $('#progress .progress-bar').css(
                'width',
                progress + '%'
            );
        }
    }).prop('disabled', !$.support.fileInput)
        .parent().addClass($.support.fileInput ? undefined : 'disabled');
});

控制器

    [HttpPost]
    public JsonResult UserProfilePic(HttpPostedFileBase file)
    {
        string UserId = System.Web.HttpContext.Current.User.Identity.GetUserId();
        var guid = Guid.NewGuid();
        string relativePath = @"~/Content/ProfilePics/" + guid + file.FileName;
        string path = Server.MapPath(relativePath);
        file.SaveAs(path);




        UserProfileViewModel model = new UserProfileViewModel();
        model.ProfilePicURL = relativePath;
        model.UserId = UserId;

        userRepository.UploadPic(relativePath, UserId);

        return Json(new { name = file.FileName });
    }

Answer 1

我使用WebAPI MVC 5控制器来接收和处理上传的文件。我看到的一个区别是我使用

HttpContext.Current.Request.Files

访问上传的文件。如果只有一个文件，则它在索引零（0）中，例如，

var postedFile = HttpContext.Current.Request.Files[0]

我不太清楚你的问题遇到了什么问题，但看看这是否有帮助。

Answer 2

只需将这两行添加到剃刀视图的顶部

即可

QAction

Answer 3

表单的ID为“ ProfilePicForm”，并且您应该将blueimp控件应用于上载控件“ fileupload”，而应该将blueimp控件（jquery）应用于实际的表单本身而不是上载控件。您的JavaScript应该显示为：

$('#ProfilePicForm').fileupload({

blueimp jQuery-File-Upload MVC剃须刀

3 个答案: