Jquery.FileUpload与MVC 5无法正常工作

时间:2015-02-18 02:43:37

标签: asp.net-mvc jquery-ui razor asp.net-mvc-5 jquery-file-upload

使用MVC 5 , VS 2013 , jquery 2.13

我在github上关注Max Pavlov教程。

我已在 bundleconfig.cs 中添加了所有css和js文件。它们被呈现为页面。但另外,由于我正在使用tinyMCE和其他各种jquery插件,并且它们也在bundleconfig.cs中被decalred,它们也被加载到这个页面中。

然而, FileUploader 功能均未生效。所有css都已应用并正确呈现。

没有javascript 。文件是第一次添加,但在调用处理程序之后,作为returnig json数据,数据在浏览器中直接显示为text/plain

在控制台中显示以下消息:

enter image description here

在这种情况下,我该怎么办?

我的观看页面

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

我认为

控制器页面是可以的。所以这里没有显示。

我的BundleConfig.cs就像:只有RegisterBundle()方法在这里。

        public static void RegisterBundles(BundleCollection bundles)
    {
        //bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
        //            "~/Scripts/jquery-{version}.js"));

        bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                    "~/Scripts/jquery.validate*"));

        // Use the development version of Modernizr to develop with and learn from. Then, when you're
        // ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
        //bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
        //            "~/Scripts/modernizr-*"));

        //bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
        //          "~/Scripts/bootstrap.js",
        //          "~/Scripts/respond.js"));

        //bundles.Add(new StyleBundle("~/Content/css").Include(
        //          "~/Content/bootstrap.css",
        //          "~/Content/site.css"));


        //External Fancy Theme implemented by Tofael............................................

        bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                  "~/Theme/js/jquery.js",
                  "~/Theme/js/jquery.easing.1.3.js",
                  "~/Theme/js/modernizr.custom.js"));

        bundles.Add(new ScriptBundle("~/bundles/jqueryNavigation").Include(
                  "~/Theme/js/jquery.responsivemenu.js",
                  "~/Theme/js/superfish.js",
                  "~/Theme/js/nav-small.js",
                  "~/Theme/js/mobile.menu.js"));

        bundles.Add(new ScriptBundle("~/bundles/jqueryRevolutionSlider").Include(
                  "~/Theme/js/jquery.themepunch.plugins.min.js",
                  "~/Theme/js/jquery.themepunch.revolution.min.js"));

        bundles.Add(new ScriptBundle("~/bundles/jquerySlider").Include(
                  "~/Theme/js/jquery.flexslider.text.js",
                  "~/Theme/js/jquery.flex-owl-slider-min.js",
                  "~/Theme/js/jquery.elastislide.js"));

        bundles.Add(new ScriptBundle("~/bundles/jqueryEasyPieChart").Include(
                  "~/Theme/js/jquery.easypiechart.js"));

        bundles.Add(new ScriptBundle("~/bundles/jqueryImagehover").Include(
                  "~/Theme/js/jquery-hover-effect.js"));

        bundles.Add(new ScriptBundle("~/bundles/jqueryColorbox").Include(
                  "~/Theme/js/jquery.colorbox-min.js"));

        bundles.Add(new ScriptBundle("~/bundles/jqueryTooltip").Include(
                  "~/Theme/js/tooltip.js",
                  "~/Theme/js/jquery.tipsy.js",
                  "~/Theme/js/jquery.ui.totop.js",
                  "~/Theme/js/jquery.isotope.min.js",
                  "~/Theme/js/popover.js",
                  "~/Theme/js/imagebox.min.js"));

        bundles.Add(new ScriptBundle("~/bundles/jqueryRevolutionSliderOwl").Include(
                  "~/Theme/js/owl.carousel.js"));

        bundles.Add(new ScriptBundle("~/bundles/jqueryScript").Include(
                  "~/Theme/js/script.js",
                  "~/Theme/js/custom.js"));

        bundles.Add(new StyleBundle("~/Content/cssfont").Include(
                  "~/Theme/css/font-awesome.css",
                  "~/Theme/css/style.css",
                  "~/Theme/css/carousel.css",
                  "~/Theme/css/colorbox.css",
                  "~/Theme/css/elements.css",
                  "~/Theme/css/rv.css",
                  "~/Theme/css/fdw-demo.css",
                  "~/Theme/css/flex-owl-slider.css",
                  "~/Theme/css/forms.css",
                  "~/Theme/css/rv.css",
                  "~/Theme/css/ie.css",
                  "~/Theme/css/imagebox.css",
                  "~/Theme/css/skeleton.css",
                  "~/Theme/css/superfish.css",
                  "~/Content/Bootstrap/bootstrap.min.css",
                  "~/Content/Bootstrap/bootstrap-responsive.min.css",
                  "~/Content/Bootstrap/bootstrap-image-gallery.min.css",
                  "~/Content/FileUpload/jquery.fileupload-ui.css"
                  ));

        bundles.Add(new StyleBundle("~/Content/cssGridMvc").Include(
                  "~/Content/Gridmvc.css",
                  "~/Content/gridmvc.datepicker.css",
                  "~/Content/gridmvc.datepicker.min.css"));

        bundles.Add(new ScriptBundle("~/bundles/jqueryGridMvc").Include(
                  "~/Scripts/gridmvc.min.js",
                  "~/Scripts/bootstrap-datepicker.js"));

        bundles.Add(new ScriptBundle("~/bundles/UploadJS").Include(
                  "~/Scripts/jquery-ui-1.8.11.min.js",
                  "~/Scripts/jquery-2.1.3.min.js",
                  "~/Content/FileUpload/tmpl.min.js",
                  "~/Content/FileUpload/canvas-to-blob.min.js",
                  "~/Content/FileUpload/load-image.min.js",
                  "~/Content/Bootstrap/bootstrap-image-gallery.min.js",
                  "~/Content/Bootstrap/bootstrap.min.js",
                  "~/Content/FileUpload/jquery.iframe-transport.js",
                  "~/Content/FileUpload/jquery.fileupload.js",
                  "~/Content/FileUpload/jquery.fileupload-ip.js",
                  "~/Content/FileUpload/jquery.fileupload-ui.js",
                  "~/Content/FileUpload/locale.js",
                  "~/Content/FileUpload/main.js"));

        bundles.Add(new ScriptBundle("~/bundles/jqueryTinymce").Include(
                  "~/Scripts/tinymce/tiny_mce.js",
                  "~/Scripts/tinymce/jquery.tinymce.js"));

        BundleTable.EnableOptimizations = false;
    }

2 个答案:

答案 0 :(得分:2)

在您看来,您的~/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")
}

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

否则不会输出结果

答案 1 :(得分:0)

从浏览器的开发控制台粗略一瞥,看起来该库依赖于blueimp的跨浏览器(包括IE9)处理文件上传的解决方案。

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

根据示例here,您需要的文件是:

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

您是否可以确保在声明jquery之后包含特定的捆绑包?