blueimp jQuery-File-Upload MVC razor答案

【问题标题】：blueimp jQuery-File-Upload MVC razorblueimp jQuery-File-Upload MVC razor
【发布时间】：2015-03-06 22:50:16
【问题描述】：

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

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

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

click here to view basic file upload

查看

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

【问题讨论】：

标签： jquery json razor file-upload asp.net-mvc-5

【解决方案1】：

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

HttpContext.Current.Request.Files

访问上传的文件。如果只有一个文件，则它位于索引零 (0) 中，例如，

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

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

【讨论】：

【解决方案2】：

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

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

【讨论】：

【解决方案3】：

表单的 id 是“ProfilePicForm”，当您应该将 blueimp 控件 (jquery) 应用于实际表单本身而不是上传控件时，您正在将 blueimp 控件应用于上传控件“fileupload”。你的 javascript 应该是：

$('#ProfilePicForm').fileupload({

【讨论】：