Jquery.FileUpload与MVC 5无法正常工作
使用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;
}
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之后包含特定的捆绑包？
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？