- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
首先我必须说我在 stackoverflow 上有所有解决方案,但没有成功。我的问题很简单,我需要在单击“开始上传”按钮之前/之后从队列中删除文件,该按钮一键上传所有文件......我的代码:
var indexProgressBar = 1;
$('#fileupload').fileupload({
autoUpload: false,
url: url,
dataType: 'json',
sequentialUploads: true,
singleFileUploads: true,
}).on('fileuploadadd', function (e, data) {
$.each(data.files, function (index, file) {
var file = data.files[0];
file.uploadID = 'progress' + indexProgressBar;
file.uploadDivID = 'itemDiv' + indexProgressBar;
file.fileId = 'deleteButton' + indexProgressBar;
var node = $('<div id=' + file.uploadDivID + ' style="margin-bottom:20px; font-size:11px;"><span class="progress-filename" style="width:180px;">' + file.name + '</span ></div>');
node.append('<img src="" id=' + file.fileId + ' alt="delete" /><br />');
node.append('<div id="' + file.uploadID + '" class="progress" style="margin-bottom:0px; width:200px;" ><div class="progress-bar progress-bar-success"></div></div>');
node.appendTo($('#filesToUpload'));
node.find("img").click(function(){
node.remove();
});
});
indexProgressBar++;
//upload Manualy
$("#uploadBtn").on('click', function () {
data.submit();
});
}).on('fileuploaddone', function (e, data) {
//upload Manualy
$("#uploadBtn").off('click');
var uploadDivID = data.files[0].uploadDivID; // returns 'someidentification'
if (data.result.status == "OK") {
$('#' + uploadDivID).fadeOut(1000, function () { $(this).remove(); });
}
else {
$('#' + uploadDivID).append("<div style='color:red'>Error: " + data.result.errorMsg + "</div>");
}
}).on('fileuploadprogress', function (e, data) {
var progress = parseInt(data.loaded / data.total * 100, 10);
var progressID = data.files[0].uploadID; // returns 'someidentification'
$('#' + progressID + ' .progress-bar').css(
'width',
progress + '%'
);
//}).on('fileuploadprogressall', function (e, data) {
//var progress = parseInt(data.loaded / data.total * 100, 10);
// $('#progress .progress-bar').css(
// 'width',
// progress + '%'
// );
}).prop('disabled', !$.support.fileInput)
.parent().addClass($.support.fileInput ? undefined : 'disabled');
问题是,这只能在视觉上删除文件,但我需要以某种方式从 data.files 中删除它,但我需要通过一个按钮上传所有文件......嗯......谢谢你的帮助。
最佳答案
我已经发现它是如何完美工作的。在数组的帮助下,它的效果很好。
var a = [];
var indexProgressBar = 0;
$('#fileupload').fileupload({
autoUpload: false,
url: url,
dataType: 'json',
sequentialUploads: true,
singleFileUploads: true,
}).on('fileuploadadd', function (e, data) {
$.each(data.files, function (index, file) {
var file = data.files[0];
file.uploadID = 'progress' + indexProgressBar;
file.uploadDivID = 'itemDiv' + indexProgressBar;
file.fileId = 'deleteButton' + indexProgressBar;
var node = $('<div id=' + file.uploadDivID + ' style="margin-bottom:20px; font-size:11px;"><span class="progress-filename" style="width:286px; display:inline-block;">' + file.name + '</span ></div>');
node.append('<img src="/_layouts/15/SkodaAuto.MarketingDatabank2.Project/Images/Icons/Delete-12.png" id=' + file.fileId + ' fileId=' + indexProgressBar + ' alt="delete" style="cursor:pointer;" /><br />');
node.append('<div id="' + file.uploadID + '" class="progress" style="margin-bottom:0px; width:300px;" ><div class="progress-bar progress-bar-success"></div></div>');
node.appendTo($('#filesToUpload'));
node.find("img").click(function () {
a.push(file.fileId);
//data.files.splice($("#" + file.fileId).attr("fileId"), 1);
$(this).fadeOut(500, function () {
node.remove();
})
});
});
indexProgressBar++;
//upload Manualy
$("#uploadBtn").on('click', function () {
if ($.inArray(data.files[0].fileId, a) == -1) {
data.submit();
}
});
}).on('fileuploadsend', function (e, data) {
if ($.inArray(data.files[0].fileId, a) != -1) {
return false;
}
}).on('fileuploaddone', function (e, data) {
//upload Manualy
$("#uploadBtn").off('click');
var uploadDivID = data.files[0].uploadDivID; // returns 'someidentification'
if (data.result.status == "OK") {
$('#' + uploadDivID).fadeOut(1000, function () { $(this).remove(); });
}
else {
$('#' + uploadDivID).append("<div style='color:red'>Error: " + data.result.errorMsg + "</div>");
}
}).on('fileuploadprogress', function (e, data) {
var progress = parseInt(data.loaded / data.total * 100, 10);
var progressID = data.files[0].uploadID; // returns 'someidentification'
$('#' + progressID + ' .progress-bar').css(
'width',
progress + '%'
);
}).on('fileuploadprogressall', function (e, data) {
var progress = parseInt(data.loaded / data.total * 100, 10);
$('#progress .progress-bar').css(
'width',
progress + '%'
);
}).prop('disabled', !$.support.fileInput)
.parent().addClass($.support.fileInput ? undefined : 'disabled');
首先我需要指定数组
var a = [];
下一个
a.push(file.fileId);
接下来是这个
//upload Manualy
$("#uploadBtn").on('click', function () {
if ($.inArray(data.files[0].fileId, a) == -1) {
data.submit();
}
});
还有这个
.on('fileuploadsend', function (e, data) {
if ($.inArray(data.files[0].fileId, a) != -1) {
return false;
}
}).
就是这样...谢谢
关于Jquery Blueimp - 从队列中删除文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30405074/
使用Blueimg Gallery我想知道如何在单击 img class=".slide-content" 希望有帮助。 关于jquery - Blueimp 画廊 : Always show "bl
当我尝试使用 blueImp 上传时,打开控制台时出现以下错误: Uncaught TypeError: Cannot read property 'parseMetaData' of undefin
是否可以更改通过jquery blueimp上传的文件的文件名? 最佳答案 require('UploadHandler.php'); class CustomUploadHandler extend
我已成功在我的网站中实现 Blueimp Gallery,并且使用 HTML5 数据属性能够使灯箱正常工作。 我用它来加载许多图片,用户可以在它们之间循环(滑动)。图片可能有与之相关的评论以及用户可
我一直在四处寻找并试图找到 Blueimp 无法工作的答案... 这非常令人沮丧,这是一个学校团队网站,我希望它很快就能完成。 这是我的代码片段:
我的页面具有以下输入元素: 然后使用以下 javascript 开始上传: $("#my-upl").fileupload({ url: uploadUrl, dataType: 'stri
我正在尝试在图像列表下添加一个删除按钮,该按钮将使用 Ajax 从图库中删除所选图像。 我遇到的问题是,每当单击删除按钮时,它都会打开图像库,下面的脚本会打开图库,当在“链接”div 内部单击时会打开
我需要恢复我上传的文件的名称或 URL: $('#fileupload').fileupload({ complete: function (e, data) {
我正在尝试使用 blueimp 文件上传插件异步上传图像,但是当我尝试上传它们时没有任何反应。根本没有触发任何回调函数。我正在使用此函数将文件 uploader 绑定(bind)到文件输入。 var
当我运行我的应用程序时,文件上传功能显示错误 未捕获类型错误:对象 [object Object] 没有方法“fileupload” $(document).ready(function(){
首先我必须说我在 stackoverflow 上有所有解决方案,但没有成功。我的问题很简单,我需要在单击“开始上传”按钮之前/之后从队列中删除文件,该按钮一键上传所有文件......我的代码:
我有一个简单的图像上传程序,用户需要上传大图片。我使用Blueimp文件 uploader 来上传图像。我还提供了一些输入字段,供用户填写图片的元数据(即标题、作者等)。 想法是,用户在填写表单并上传
我正在尝试构建将在我的网站项目中使用的上传模块。我选择了 blueimp 文件上传,因为它提供了所有配置选项。 想法是有按钮,它将显示带有上传模块的模态窗口。 我的(几乎)工作原型(prototype
这就是我正在努力解决的问题:https://github.com/blueimp/jQuery-File-Upload 我遇到了this topic这与我的问题类似: 我有一些产品,您应该能够关联多个
我正在使用这个: https://github.com/blueimp/jQuery-File-Upload 一切都很好,但我想知道如何做到这一点,所以每当我在其中上传完东西时,当我再次进入那个上传页
我正在尝试在 blueimp 文件上传脚本中找到位置,以更改表中新文件位置的行为。如何强制将它们添加到文件列表末尾的表格顶部? 最佳答案 只需添加属性prependFiles:true 例子: $('
我正在使用jQuery file upload plugin用于文件上传。上传工作正常。但现在我想添加对文件大小和类型的任何限制。不幸的是,验证没有被触发。 我包括下一个插件文件:jquery.fil
我正在尝试使用 blueimp 控件仅上传单个文件(就像普通的 HTML 文件上传一样)。但是,在文件上传完成后,我选择了另一个文件,以前的文件会与新文件一起再次上传。随后,每次我选择一个文件后,都会
我使用 blueimp gallery 进行幻灯片放映默认情况下,当我打开幻灯片时,它会自动播放图片,换句话说,它会自动从一张图像移动到另一张图像。 ‹ › × 我想在打开幻灯片时停止播放图
我正在设置 blueimp lightbox,lightbox 正在启动,但没有加载/显示图像,是新的,我应该在脚本中添加什么以允许它找到图像..?我希望能够让灯箱显示来自单击的任何缩略图的图像...
我是一名优秀的程序员,十分优秀!