使用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
。
在控制台中显示以下消息:
在这种情况下,我该怎么办?
我的观看页面
@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">×</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;
}
答案 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之后包含特定的捆绑包?