Asp.net mvc MVC 5不工作时的Jquery.FileUpload

使用

MVC5，VS 2013，jquery 2.13

我正在学习github的教程

我已经在我的bundleconfig.cs中添加了所有css和js文件。它们被呈现在页面上。但除此之外，由于我正在使用tinyMCE和其他各种jquery插件，而且它们也在bundleconfig.cs中贴花，所以它们也加载到了这个页面中

但是，文件上传器的功能均未生效。所有css都已应用并正确呈现

但是没有javascript。文件是第一次添加的，但在调用handler之后，由于返回的是ig

json

data，因此数据在浏览器中直接显示为

text/plain

在其控制台中显示以下消息：

在这种情况下，我该怎么办

我的查看页面：

@using ClientDependency.Core.Mvc

@{
@Scripts.Render("~/bundles/UploadJS")
}
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?cdv=1"></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js?cdv=1"></script> 
        <div class=" row-6">
    <div class="container">
        <form id="fileupload" action="~/Upload/UploadHandler.ashx" method="POST" enctype="multipart/form-data">
            <!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload -->
            <div class="row fileupload-buttonbar">
                <div class="span7">
                    <!-- 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>Add files...</span>
                        <input type="file" name="files[]" multiple onclick="alert('click');">
                    </span>
                    <button type="submit" class="btn btn-primary start">
                        <i class="icon-upload icon-white"></i>
                        <span>Start upload</span>
                    </button>
                    <button type="reset" class="btn btn-warning cancel">
                        <i class="icon-ban-circle icon-white"></i>
                        <span>Cancel upload</span>
                    </button>
                    <button type="button" class="btn btn-danger delete">
                        <i class="icon-trash icon-white"></i>
                        <span>Delete</span>
                    </button>
                    <input type="checkbox" class="toggle">
                </div>
                <div class="span5">
                    <!-- The global progress bar -->
                    <div class="progress progress-success progress-striped active fade">
                        <div class="bar" style="width:0%;"></div>
                    </div>
                </div>
            </div>
            <!-- The loading indicator is shown during image processing -->
            <div class="fileupload-loading"></div>
            <br>
            <!-- The table listing the files available for upload/download -->
            <table class="table table-striped">
                <tbody class="files" data-toggle="modal-gallery" data-target="#modal-gallery">
                </tbody>
            </table>
        </form>

        <!-- modal-gallery is the modal dialog used for the image gallery -->
        <div id="modal-gallery" class="modal modal-gallery hide fade">
            <div class="modal-header">
                <a class="close" data-dismiss="modal">&times;</a>
                <h3 class="modal-title"></h3>
            </div>
            <div class="modal-body"><div class="modal-image"></div></div>
            <div class="modal-footer">
                <a class="btn btn-primary modal-next">
                    <span>Next</span>
                    <i class="icon-arrow-right icon-white"></i>
                </a>
                <a class="btn btn-info modal-prev">
                    <i class="icon-arrow-left icon-white"></i>
                    <span>Previous</span>
                </a>
                <a class="btn btn-success modal-play modal-slideshow" data-slideshow="5000">
                    <i class="icon-play icon-white"></i>
                    <span>Slideshow</span>
                </a>
                <a class="btn modal-download" target="_blank">
                    <i class="icon-download"></i>
                    <span>Download</span>
                </a>
            </div>
        </div>
        <!-- The template to display files available for upload -->
        <script id="template-upload" type="text/x-tmpl">
            {% for (var i=0, file; file=o.files[i]; i++) { %}
            <tr class="template-upload fade">
                <td class="preview"><span class="fade"></span></td>
                <td class="name"><span>{%=file.name%}</span></td>
                <td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td>
                {% if (file.error) { %}
                <td class="error" colspan="2"><span class="label label-important">{%=locale.fileupload.error%}</span> {%=locale.fileupload.errors[file.error] || file.error%}</td>
                {% } else if (o.files.valid && !i) { %}
                <td>
                    <div class="progress progress-success progress-striped active"><div class="bar" style="width:0%;"></div></div>
                </td>
                <td class="start">
                    {% if (!o.options.autoUpload) { %}
                    <button class="btn btn-primary">
                        <i class="icon-upload icon-white"></i>
                        <span>{%=locale.fileupload.start%}</span>
                    </button>
                    {% } %}
                </td>
                {% } else { %}
                <td colspan="2"></td>
                {% } %}
                <td class="cancel">
                    {% if (!i) { %}
                    <button class="btn btn-warning">
                        <i class="icon-ban-circle icon-white"></i>
                        <span>{%=locale.fileupload.cancel%}</span>
                    </button>
                    {% } %}
                </td>
            </tr>
            {% } %}
</script>
    <!-- The template to display files available for download -->
    <script id="template-download" type="text/x-tmpl">
        {% for (var i=0, file; file=o.files[i]; i++) { %}
        <tr class="template-download fade">
            {% if (file.error) { %}
            <td></td>
            <td class="name"><span>{%=file.name%}</span></td>
            <td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td>
            <td class="error" colspan="2"><span class="label label-important">{%=locale.fileupload.error%}</span> {%=locale.fileupload.errors[file.error] || file.error%}</td>
            {% } else { %}
            <td class="preview">
                {% if (file.thumbnail_url) { %}
                <a href="{%=file.url%}" title="{%=file.name%}" rel="gallery" download="{%=file.name%}"><img src="{%=file.thumbnail_url%}"></a>
                {% } %}
            </td>
            <td class="name">
                <a href="{%=file.url%}" title="{%=file.name%}" rel="{%=file.thumbnail_url&&'gallery'%}" download="{%=file.name%}">{%=file.name%}</a>
            </td>
            <td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td>
            <td colspan="2"></td>
            {% } %}
            <td class="delete">
                <button class="btn btn-danger" data-type="{%=file.delete_type%}" data-url="{%=file.delete_url%}">
                    <i class="icon-trash icon-white"></i>
                    <span>{%=locale.fileupload.destroy%}</span>
                </button>
                <input type="checkbox" name="delete" value="1">
            </td>
        </tr>
        {% } %}
    </script>
</div>

---

粗略地看一下浏览器的开发控制台，它看起来像是该库依赖blueimp的跨浏览器（包括IE9）解决方案来处理文件上传

该解决方案需要3个javascript文件，所有这些文件似乎都包含在名为“~/bundles/UploadJS”的包中

根据示例，您需要的文件包括：

---

您能否确保在声明jquery之后包含该特定捆绑包？

在您看来，您包含的是

~/bundles/UploadJS

捆绑包，其中包括

“~/Scripts/jquery-2.1.3.min.js”

并单独包括

http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?cdv=1

在您的视图中

挑一个或另一个

还有，改变

@{
@Scripts.Render("~/bundles/UploadJS")
}

到

---

否则，它将不会输出结果

重新阅读您的文章，以防不清楚，仅在BundleConfig.cs中包含一个包不会在您的页面中包含脚本。实际上，您必须在页面中包含它们，例如：@Scripts.Render（“~/bundles/UploadJS”）可能是

，

正在覆盖widget.js。我不确定。它是？很抱歉，我用了这个，但是在发布问题删除评论行时，我已经删除了该行。剩下的两个文件都正确使用了。就为了搞笑，你能不使用捆绑包手动包含这三个文件吗？您的浏览器开发人员控制台似乎表明这些文件对扩展jquery没有任何影响。好的，但没有类似的文件。我应该在哪里买？我现在又下载了jaquery.UI。但是没有这样的文件。我从code.google创建了一个名为

jquery.ui.widget.js

的文件，并手动加载了其中三个。。。现在还是一样的问题。我选择了

~/bundles/UploadJS

。。。但是没有改变。试试看，它很容易使用和定制。

<!-- Should be included with jquery.ui -->
<script src="js/jquery.ui.widget.js"></script>
<script src="js/jquery.iframe-transport.js"></script>
<script src="js/jquery.fileupload.js"></script>

@{
@Scripts.Render("~/bundles/UploadJS")
}

@Scripts.Render("~/bundles/UploadJS")