在 jQuery 文件上传中添加文件索引到文件列表
0/5 (0投票)
如何在 fileupload jQuery 插件中为文件记录添加“索引”
序言
fileupload 是一个优秀的 jQuery 插件，它实现了异步文件上传。我发现它非常有用，但在开始依赖于列表中文件的位置时遇到了一些障碍。背景
在 Affectix 中，我们创建在线消息并允许用户上传图像以附加到消息中。例如 - 如果我想创建一个关于我丢失的宠物的消息，我会上传宠物的图像，Affectix 会将这些图像附加到消息中。由于各种原因，我决定将图像保存在列表中。它看起来像这样：MessageObject | |--> Images = [img1, img2, img3, ....]再仔细看看
如果你考虑MessageObject 的 Editor-WebPage，你会发现上传的图像在屏幕上显示为一个列表。该列表包含可能 GET/POST 到服务器的 href 锚点 - 指示删除图像。问题
我们希望能够GET/POST 指令：“删除索引为 3 的图像”，但 fileupload 并没有在文件记录中提供“索引”值。解决方案
我们增强了 fileupload 插件以包含索引。细节
fileupload 带有 2 个 .js 文件- jquery.fileupload.js
- jquery.fileupload-ui.js
步骤 1
添加一个支持函数（'_set_indexes'），该函数查询 fileupload DOM，并创建所需的索引。注意：索引存储在 jQuery 的 'data' 对象中//
// jquery.fileupload-ui.js
//
(function ($) {
'use strict';
// The UI version extends the basic fileupload widget and adds
// a complete user interface based on the given upload/download
// templates.
$.widget('blueimpUI.fileupload', $.blueimp.fileupload, {
options: {
...
},
...
/// ------------------------------------------------------------
_set_indexes: function() {
$('$.files .template-download').each(function(index, obj) {
var jObj = $(obj);
jObj.data('index', index);
//debug(jObj.data('index'));
});
},
/// ------------------------------------------------------------
...
});
}(jQuery));
第二步
每当列表发生更改时（粗体行）启动支持函数。例如，当文件刚刚上传完成，或者文件从列表中被删除时(function ($) {
'use strict';
// The UI version extends the basic fileupload widget and adds
// a complete user interface based on the given upload/download
// templates.
$.widget('blueimpUI.fileupload', $.blueimp.fileupload, {
options: {
...
done: function (e, data) {
var that = $(this).data('fileupload');
if (data.context) {
data.context.each(function (index) {
var file = ($.isArray(data.result) &&
data.result[index]) || {error: 'emptyResult'};
if (file.error) {
that._adjustMaxNumberOfFiles(1);
}
$(this).fadeOut(function () {
that._renderDownload([file])
.css('display', 'none')
.replaceAll(this)
.fadeIn(function () {
// Fix for IE7 and lower:
$(this).show();
that._set_indexes();
});
});
});
} else {
that._renderDownload(data.result)
.css('display', 'none')
.appendTo($(this).find('.files'))
.fadeIn(function () {
// Fix for IE7 and lower:
$(this).show();
that._set_indexes();
});
}
},
...
destroy: function (e, data) {
var that = $(this).data('fileupload');
if (data.url) {
debug(data);
$.ajax(data)
.success(function () {
that._adjustMaxNumberOfFiles(1);
$(this).fadeOut(function () {
$(this).remove();
that._set_indexes();
});
});
} else {
data.context.fadeOut(function () {
$(this).remove();
that._set_indexes();
});
}
}
...
},
...
});
}(jQuery));
步骤 3
修复 'delete' Ajax 调用(function ($) {
'use strict';
// The UI version extends the basic fileupload widget and adds
// a complete user interface based on the given upload/download
// templates.
$.widget('blueimpUI.fileupload', $.blueimp.fileupload, {
options: {
...
},
_deleteHandler: function (e) {
e.preventDefault();
var button = $(this);
var context = button.closest('.template-download');
e.data.fileupload._trigger('destroy', e, {
context: context,
url: button.attr('data-url'),
type: button.attr('data-type'),
dataType: e.data.fileupload.options.dataType ,
data: { 'index': context.data('index') }
});
},
...
});
}(jQuery));
步骤 4
在服务器端，你将收到 'index' 变量。你可以从那里开始。摘要
在这个代码技巧中，我们实现了对 jquery fileupload 插件的增强。我们为文件列表添加了一个索引，并修复了 'delete' 调用以包含该索引。附带的代码每次列表更改时都会刷新索引。因此，我们能够仅使用它们的索引和上下文来删除文件。祝你好运！Or (David) Berkovitch