- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
在文档事件就绪时,问题是:
TypeError: this.element.find(...).find(...).each(...).end(...).find(...).button(...).end(...).find(...).button(...).end(...).find(...).button(...).end(...).find(...).progressbar is not a function
jquery.fileupload-jquery-ui.js 的第 114 行。
当我尝试输入一些东西时,我在控制台中有这样的东西:
TypeError: $this.find(...).find(...).progressbar is not a function
jquery.fileupload-jquery-ui.js的第45行
TypeError: node.find(...).empty(...).progressbar is not a function
jquery.fileupload-jquery-ui.js 的第 60 行
我注释掉了不包含 jquery.fileupload-jquery-ui.js 的行。上传文件与选项 autoUpload:true 一起工作正常。如果 autoUpload 为 false,则不会显示开始/取消按钮和进度条。
提示?
这些是我的图书馆:
当然是 jquery-1.8.2.min.js 和 bootstrap.min.js。
这是代码:
<div class="row">
<div class="col-2"></div>
<div class="col-8">
<h3 style="text-align: center;">Upload your 3D model (.3ds, .stl, .obj)</h3>
<div id="fileupload">
<!-- 3D rendering antaning files -->
<div id="fileupload-render">
<div style="text-align: center;" class="fileupload-buttonbar">
<label class="fileinput-button">
<span class="btn btn-primary">Add files...</span>
<form enctype="multipart/form-data">
<input type="file" accept="object/*" name="files[]" multiple>
</form>
</label>
</div>
<table role="presentation" class="table item">
<tbody id="render-files" class="files"></tbody>
</table>
</div>
<!-- i files-->
<div id="fileupload-image">
<h3 style="text-align:center;">Upload your image (.png, .jpeg, .gif)</h3>
<div style="text-align: center;" class="fileupload-buttonbar">
<label class="fileinput-button">
<span class="btn btn-primary">Add files...</span>
<form enctype="multipart/form-data">
<input type="file" accept="image/*" name="files2[]" multiple>
</form>
</label>
<span class="fileupload-process"></span>
</div>
<table role="presentation" class="table item">
<tbody id="image-files" class="files"></tbody>
</table>
</div>
<!-- Multimedia files -->
<div id="fileupload-multimedia">
<h3 style="text-align:center;">Upload your video files (.avi, .mp4, .mpeg)</h3>
<div style="text-align: center;" class="fileupload-buttonbar">
<label class="fileinput-button">
<span class="btn btn-primary">Add files...</span>
<form enctype="multipart/form-data">
<input type="file" accept="video/*" name="files3[]" multiple>
</form>
</label>
</div>
<table role="presentation" class="table item">
<tbody id="multimedia-files" class="files"></tbody>
</table>
</div>
<!-- The global progress state -->
<div class="col-lg-5 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"> </div>
</div>
</div>
<div style="text-align: center;">
<a class="btn btn-success" href="<?=$this->redirect?>"><?=$this->translate("Concludi")?></a>
</div>
</div>
</div>
<script>
/*jslint unparam: true, regexp: true */
/*global window, $ */
$(function () {
'use strict';
// Change this to the location of your server-side upload handler:
var url = "/item/upload-file/";
var uploadButton = $('<button/>')
.addClass('btn btn-primary')
.prop('disabled', true)
.text('Processing...')
.on('click', function () {
var $this = $(this),
data = $this.data();
$this
.off('click')
.text('Abort')
.on('click', function () {
$this.remove();
data.abort();
});
data.submit().always(function () {
$this.remove();
});
});
$('#fileupload').fileupload({
url: url,
dataType: 'json',
autoUpload: true,
acceptFileTypes: /(\.|\/)(gif|jpe?g|png|avi|stl|obj|3ds|mpeg)$/i,
// maxFileSize: 50000000, // 5 MB
previewMaxWidth: 100,
previewMaxHeight: 100,
previewCrop: true,
})
.on('fileuploadadd', function (e, data) {
//console.log("trigger: " + $(this).attr('id'));
console.log(data.files);
data.context = $('#files');
//console.log(data.context);
$.each(data.files, function (index, file) {
var htmlcheck = $('<tr class="cover_box"></tr><tr style="background-color: #E9E9E9; border: 1px solid #CCC;" class="template-upload"><td style="width: 120px" class="preview"></td><td class="name vertical-aligned"></td><td class="size vertical-aligned"></td><td class="upload-ok vertical-aligned"></td></tr>');
htmlcheck.find('.name').text(file.name);
htmlcheck.find('.size').text(file.size + ' kB');
htmlcheck.find('.preview').text(file.preview);
var html = $('<tr style="background-color: #E9E9E9; border: 1px solid #CCC;" class="template-upload"><td style="width: 120px" class="preview"></td><td class="name vertical-aligned"></td><td class="size vertical-aligned"></td><td class="upload-ok vertical-aligned"></td></tr>');
html.find('.name').text(file.name);
html.find('.size').text(file.size + ' kB');
html.find('.preview').text(file.preview);
if (file.type == 'image/png' || file.type == 'image/gif' || file.type == 'image/jpeg' || file.type == 'image/jpg') {
data.context = $('#image-files');
htmlcheck.appendTo(data.context);
}
else if (file.type == 'video/x-msvideo' || file.type == 'video/mp4' || file.type == 'video/mpeg') {
data.context = $('#multimedia-files');
htmlcheck.appendTo(data.context);
}
// #TODO: find the right file.type for render-files
else if (file.type == 'image/3ds' || file.type == 'image/stl' || file.type == 'image/obj') {
data.context = $('#render-files');
html.appendTo(data.context);
}
else {
alert("Gianni, metti il formato giusto!")
}
});
}).on('fileuploadprocessalways', function (e, data) {
var node = '';
var index = data.index,
file = data.files[index];
if (file.type == 'image/png' || file.type == 'image/gif' || file.type == 'image/jpeg' || file.type == 'image/jpg') {
node = $("#image-files tr:last td:first");
}
else if (file.type == 'video/x-msvideo' || file.type == 'video/mp4' || file.type == 'video/mpeg') {
node = $("#multimedia-files tr:last td:first");
}
//console.log(node);
if (file.preview)
node.prepend(file.preview);
if (file.error) {
node.prepend(file.error);
}
}).on('fileuploadprogressall', function (e, data) {
var progress = parseInt(data.loaded / data.total * 100, 10);
console.log(data);
$('#progress .progress-bar').css('width', progress + '%');
$('#percentage').html(progress + '%');
}).on('fileuploaddone', function (e, data) {
$.each(data.result.files, function (index, file) {
var link = $('<a>')
.attr('target', '_blank')
.prop('href', file.url);
alert(file.type);
$("#files tr:last td:first canvas").wrap(link);
$('.upload-ok').html('Uploaded');
});
}).on('fileuploadfail', function (e, data) {
$.each(data.result.files, function (index, file) {
var error = $('<span/>').text(file.error);
$(data.context.children()[index])
.append(error);
});
}).prop('disabled', !$.support.fileInput)
.parent().addClass($.support.fileInput ? undefined : 'disabled');
});
</script>
<!-- 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>
<label><input type="checkbox" name="delete" value="1" class="unique">marck as cover</label>
</td>
<td>
<span class="preview"></span>
</td>
<td>
<p class="name">{%=file.name%}</p>
<strong class="error text-danger"></strong>
</td>
<td>
<p class="size">Processing...</p>
<div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><div class="progress-bar progress-bar-success" style="width:0%;"></div></div>
</td>
<td>
{% if (!i && !o.options.autoUpload) { %}
<button class="btn btn-primary start" disabled>
<i class="glyphicon glyphicon-upload"></i>
<span>Start</span>
</button>
{% } %}
{% if (!i) { %}
<button class="btn btn-warning cancel">
<i class="glyphicon glyphicon-ban-circle"></i>
<span>Cancel</span>
</button>
{% } %}
</td>
</tr>
{% } %}
</script>
<script>
$('input.unique').click(function() {
$('input.unique:checked').not(this).removeAttr('checked');
});
</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">
<td>
<span class="preview">
{% if (file.thumbnailUrl) { %}
<a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" data-gallery><img src="{%=file.thumbnailUrl%}"></a>
{% } %}
</span>
</td>
<td>
<p class="name">
{% if (file.url) { %}
<a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" {%=file.thumbnailUrl?'data-gallery':''%}>{%=file.name%}</a>
{% } else { %}
<span>{%=file.name%}</span>
{% } %}
</p>
{% if (file.error) { %}
<div><span class="label label-danger">Error</span> {%=file.error%}</div>
{% } %}
</td>
<td>
<span class="size">{%=o.formatFileSize(file.size)%}</span>
</td>
<td>
{% if (file.deleteUrl) { %}
<button class="btn btn-danger delete" data-type="{%=file.deleteType%}" data-url="{%=file.deleteUrl%}"{% if (file.deleteWithCredentials) { %} data-xhr-fields='{"withCredentials":true}'{% } %}>
<i class="glyphicon glyphicon-trash"></i>
<span>Delete</span>
</button>
<input type="checkbox" name="delete" value="1" class="toggle">
{% } else { %}
<button class="btn btn-warning cancel">
<i class="glyphicon glyphicon-ban-circle"></i>
<span>Cancel</span>
</button>
{% } %}
</td>
</tr>
{% } %}
</script>
感谢您的帮助。
最佳答案
关于javascript - jQuery 文件上传插件 - 开始/取消按钮和进度条不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21232841/
我在互联网上搜索了很多小时,但没有找到满意的结果,所以 -VSTO Addin 和 COM Addin(我们作为类库项目制作并使用 Excel 对象)之间有什么区别?VSTO 项目是否有任何限制,例如
我在互联网上搜索了很多小时,但没有找到满意的结果,所以 -VSTO Addin 和 COM Addin(我们作为类库项目制作并使用 Excel 对象)之间有什么区别?VSTO 项目是否有任何限制,例如
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。 要求我们推荐或查找工具、库或最喜欢的场外资源的问题对于 Stack Overflow 来说是偏离主题的,
我正在寻找有关如何构建可扩展 WCF 服务器(具有动态加载的服务)的建议,最好使用 System.Addins 或 MEF。 服务器应托管实现最小“插件”API(StartService/StopSe
有没有一种方法可以使用加载浏览器扩展/插件/插件的 headless 浏览器(即 PhantomJS、Selenium)来运行自动测试? 更具体地说,我想模拟广告拦截器(如 Ghostery、ad-b
我是 gradle 的新手,我使用 artifactory 作为我的 repo 服务器。我在网上查看了如何将我的项目发布到我的 repo 服务器,发现我可以使用 maven-publish 或使用 a
我想禁用某些状态的点击/事件,并仅使少数状态可点击。我通读了http://newsignature.github.io/us-map/处的文档,并且找不到与此问题相关的任何内容。 最佳答案 http:
据我了解,在Intellij中使用idea插件打开Maven构建的项目并不是最好的方法,即调用: mvn idea:idea 但是直接打开pom文件(Intellij有默认的Maven插件);同样的事
使用Artifactory plugin对于 Jenkins pipeline 来说是一种幸福,只要遵循文档就可以了。但后来我介绍了Maven Flatten plugin解析父模块和子模块 mvn
我已经安装了Elasticsearch版本1.7.1。一切正常。我也安装了 JDBC 驱动程序。检查下面我的插件文件夹 目录E:\Xampp\htdocs\my-elastic\elasticsear
在我使用 webpack common chunks 插件创建包含第三方库(如 angular、react、lodash 等)的 vendor 包之前,但后来我知道了 webpack dll
我们正在尝试使用(Jenkins、sonar、eclipse ...)安装 CI 平台。 为了让每个开发人员都可以在提交之前对他的代码进行分析,我想知道两种选择: 使用 Sonar 插件运行本地分析。
我知道这是一个比较特殊的问题。尽管如此,也许有些人知道这一点: 我想在 Eclipse 中使用 Maven 编译 Hector=> 分支:0.7.0 和标签:hector-0.7.0-29(https
我卡住了。我一直在尝试寻找或自己创建一个简单的准系统示例,说明如何为 VS 2010 Express 创建 Outlook 插件。我知道这在 VS 2010 Pro 中更简单,但是,在快速版本中真的不
我有以下排除过滤器来忽略所有 R 文件类: findbugs-exclude-filter.xml 当我将它用于 FindBugs-IDEA 插件时,它可以
我刚开始玩 CakePHP,我发现了 Wildflower CMS .我喜欢这个想法,并打算开始修补它。不过,我有一个问题。 在自述文件中,我发现了以下内容:“Wildflower 不是也不会是 Ca
虽然现在大部分情况都是使用n-api来编写插件,但是底层毕竟是v8(和libuv),使用v8编写简单的插件,同时熟悉v8的使用。 本文介绍在写c++插件时,简单又常用的写法,其实本质上,写插件
本篇是 Python 系列教程第 3 篇,更多内容敬请访问我的 Python 合集 Visual Studio Code的安装非常简单,就不放这里增加文章篇幅了。 相比PyCharm,V
Maven – 插件 什么是 Maven 插件? Maven 实际上是一个依赖插件执行的框架,每个任务实际上是由插件完成。Maven 插件通常被用来: 创建 jar 文件 创建 war
我正在编写一个插件来添加带有标签 [deposit_page] 的页面;该标记应替换为一些 PHP 代码。 这就是我所拥有的,但它不起作用。有什么我遗漏或做错了什么吗? function deposi
我是一名优秀的程序员,十分优秀!