Question

我试图使用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();
        }
    });
});

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

{
   "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
      }
}

我想要实现的是在选择图片后立即将它们添加到上传表并显示上传过程，并在上传完成后显示文件信息与此演示非常相似，但autoupload除外：

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

我非常感谢任何提示建议说明或任何可以帮助我的事情。

马立克

Answer 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>

然后对于Controller（在我自己的情况下，HomeController：请参阅$（＆＃39; .upLoad＆＃39;）的文件上传＆＃39;参数...）

[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文件并将其放在应用程序目录中的正确文件夹中。

Answer 2

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

无论如何我在我的实现中发现了问题而且唯一的事情（可能是其他一些小改动）是在输入上应用插件以在具有文件输入的表单上应用插件的更改。这样它对我有用，但无论如何都要感谢。也许你的解决方案会帮助别人。

干杯！

使用make jQuery File Upload插件的麻烦在MVC中工作

2 个答案: