使 jQuery File Upload 插件在 MVC 中工作的问题答案

【问题标题】：Troubles with make jQuery File Upload plugin work in MVC使 jQuery File Upload 插件在 MVC 中工作的问题
【发布时间】：2014-12-25 07:59:54
【问题描述】：

我正在尝试使用 jQuery File Upload pugin 实现我的图库上传，但由于某些原因（让我发疯），我在 UI 上看不到任何内容。我尝试像在 Basic Plus UI 示例中那样设置所有插件，所以这是我的实现：

首先我要加载的 HTML 代码 + 脚本：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <link href="/Content/bootstrap.css" rel="stylesheet"/>
    <link href="/Content/bootstrap-theme.css" rel="stylesheet"/>
    <link href="/Content/style.css" rel="stylesheet"/>
    <link href="/Content/jQuery.FileUpload/css/jquery.fileupload.css" rel="stylesheet"/>
    <link href="/Content/jQuery.FileUpload/css/jquery.fileupload-ui.css" rel="stylesheet"/>
    <script src="/Scripts/jquery-2.1.1.js"></script>
    <script src="/Scripts/jquery-ui-1.11.2.js"></script>
    <script src="/Scripts/jquery.validate.js"></script>
    <script src="/Scripts/modernizr-2.8.3.js"></script>
    <script src="/Scripts/jquery.eventCalendar.js"></script>
    <!-- Bootstrap CSS fixes for IE6 -->
    <!--[if lt IE 7]><link rel="stylesheet" href="/Content/FileUpload/css/bootstrap/bootstrap-ie6.debug.css"><![endif]-->
    <!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
...
<body>
...
<div class="row fileupload-buttonbar">
    <div class="col-lg-12">
        <!-- The fileinput-button span is used to style the file input field as button -->
        <span class="btn btn-success fileinput-button">
            <i class="icon-plus icon-white"></i>
            <span>Choose files...</span>
            <input type="file" name="files[]" id="fileupload" multiple="multiple" />
        </span>
    </div>
    <!-- The global progress state -->
    <div class="col-lg-12 fileupload-progress fade">
        <!-- The global progress bar -->
        <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100">
            <div class="progress-bar progress-bar-success" style="width:0%;"></div>
        </div>
        <!-- The extended global progress state -->
        <div class="progress-extended">&nbsp;</div>
    </div>
</div>
<!-- The table listing the files available for upload/download -->
<table role="presentation" class="table table-striped"><tbody class="files"></tbody></table>

<!-- The template to display files available for upload -->
<script id="template-upload" type="text/x-tmpl">
    {% alert('eho'); %}
    <tr class="template-upload fade">
        <td>
            <p>template-upload</p>
        </td>
     </tr>        
</script>
<!-- The template to display files available for download -->
<script id="template-download" type="text/x-tmpl">
    {% alert('eho2'); %}
    <tr class="template-download fade">
        <td>
            <p>template-upload</p>
        </td>
    </tr>
</script>

<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/jQuery.FileUpload/jquery.fileupload.js"></script>
<script src="/Scripts/jQuery.FileUpload/jquery.fileupload-ui.js"></script>
<script src="/Scripts/jQuery.FileUpload/jquery.iframe-transport.js"></script>
<script src="/Scripts/jQuery.FileUpload/jquery.fileupload-process.js"></script>
<script src="/Scripts/jQuery.FileUpload/jquery.fileupload-image.js"></script>
<script src="/Scripts/jQuery.FileUpload/jquery.fileupload-audio.js"></script>
<script src="/Scripts/jQuery.FileUpload/jquery.fileupload-video.js"></script>
<script src="/Scripts/jQuery.FileUpload/jquery.fileupload-validate.js"></script>
<script src="/Scripts/tmpl.js"></script>
<script src="/Scripts/JavaScript-Load-Image/load-image.all.min.js"></script>
<script src="/Scripts/JavaScript-Canvas-to-Blob/canvas-to-blob.min.js"></script>

<script src="/Scripts/SCPS/upload.js"></script>

</body>

我的 upload.js 文件如下所示：

$(document).ready(function() {
    $('#fileupload').fileupload({
        url: '/Upload/UploadContentImage',
        autoUpload: true,
        add: function (e, data) {
            alert('sending');
            data.submit();
        }
    });
});

当我使用选择文件...按钮选择文件时，会显示发送警报。我还能够在服务器端处理图像，并且我返回了一些不同的 JSON 结构，我想将其传递给 JS 模板，但它不应该有所作为。现在我只需要在服务器返回响应后至少能看到发生的事情。我的回复正文如下所示：

{
   "statusCode":200,
   "status":"Image uploaded successfully.",
   "file":{
      "Id":1055,
      "Name":"P1130142_ee0bbf3639aa4d06a7140839f33eb90d.JPG",
      "DisplayName":"P1130142.JPG",
      "Url":"D:\\....\\Files\\Content\\2014\\1024\\P1130142_ee0bbf3639aa4d06a7140839f33eb90d.JPG",
      "ThumbnailUrl":"D:\\....\\Files\\Content\\2014\\150\\P1130142_ee0bbf3639aa4d06a7140839f33eb90d.JPG",
      "OriginalUrl":"D:\\....\\Files\\Content\\2014\\P1130142_ee0bbf3639aa4d06a7140839f33eb90d.JPG",
      "MimeType":"image/jpeg",
      "Order":0,
      "Size":3657508,
      "Gallery":null,
      "GalleryId":null
      }
}

我想要实现的是在拿起图片后立即将它们添加到上传表并显示上传过程，上传完成后显示文件信息与这个演示非常相似，除了自动上传：

https://blueimp.github.io/jQuery-File-Upload/

我非常感谢任何提示建议注释或任何可以帮助我的东西。

马雷克

【问题讨论】：

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

【解决方案1】：

我能感受到你的痛苦，因为我经历了这么多麻烦，然后才决定用我的超级工作来做这件事。

观点：

<link rel="stylesheet" href="/Content/css/bootstrap.min.css">
<link rel="stylesheet" href="/Content/css/jquery.fileupload.css">

<span class="btn btn-success fileinput-button">
    <i class="glyphicon glyphicon-plus"></i>
    <span>&nbsp;Select file</span>
    <input type="file" name="docs" class="upLoad">
</span>
<input type="hidden" name="@id" value="@Model[i].Id" />
<div id="@fil" class="files"></div>
<div id="@prog" class="progress">
    <div class="progress-bar progress-bar-success"></div>
</div>

<script src="@Url.Content("/Scripts/js/vendor/jquery.ui.widget.js")" type="text/javascript"></script>
<script src="@Url.Content("/Scripts/js/jquery.iframe-transport.js")" type="text/javascript"></script>
<script src="@Url.Content("/Scripts/js/jquery.fileupload.js")" type="text/javascript"></script>
<script src="@Url.Content("/Scripts/js/bootstrap.min.js")" type="text/javascript"></script>

<script type="text/javascript">
    $(function () {
        'use strict';
        // Change this to the location of your server-side upload handler:
        var loc = '';
        var uid = 0;
        var i = 0;

        $('.upLoad').fileupload({
                dataType: 'json',
                url: '/Home/UploadFile',
                done: function (e, data) {
                    $.each(data.result, function (index, file) {
                        $('<p/>').text(file.name).appendTo('#file' + i);
                    });
                },
                progressall: function (e, data) {
                    var progress = parseInt(data.loaded / data.total * 100, 10);
                    var progBox = '#progress' + $(this).attr("data-i") + ' .progress-bar';

                    $(progBox).css(
                        'width',
                        progress + '%'
                    );
                }
            }).prop('disabled', !$.support.fileInput)
            .parent().addClass($.support.fileInput ? undefined : 'disabled')
        });
    });
</script>

然后对于控制器（在我自己的情况下，HomeController：请参阅 $('.upLoad').fileupload 的 'url' 参数...）

[HttpPost]
public ActionResult UploadFile(IEnumerable<HttpPostedFileBase> docs)
{
    //Works for multiple file upload
    foreach (var file in docs)
    {
        if (file != null)
        {
            if (file.ContentLength > 0)
            {
                string location = HttpContext.Current.Server.MapPath(string.Format("/Content/UploadedDocs"));
                string filePath = Path.Combine(location, Path.GetFileName(file.FileName));
                if (!Directory.Exists(location))
                    Directory.CreateDirectory(location);
                file.SaveAs(filePath);
            }
        }
    }
    return Json(docs.Select(x => new { name = x.FileName }));            
}

确保您已下载 Blueimp 文件并将其放置在应用程序目录中的正确文件夹中。

【讨论】：

【解决方案2】：

感谢您的回答，基本上它可以按您的方式工作。

无论如何，我在我的实现中发现了问题，唯一的事情（可能是其他一些小变化）是将在输入上应用插件更改为在具有文件输入的表单上应用插件。这种方式对我有用，但还是非常感谢。也许您的解决方案会对其他人有所帮助。

干杯！

【讨论】：