使用valums-ajax上传器从上传列表中删除特定文件
Delete a specific file from the list of uploads using valums ajax uploader
当使用valums-ajax上传器上传文件时,我们会得到带有文件名和文件大小的文件列表。我希望列表附带文件名、文件大小和文件的删除链接。这样,当用户单击删除时,文件应该会从显示的列表中删除。我成功地获得了每个文件的删除链接,但由于我对javascript的了解较少,无法按照我的意愿进行处理。如果有人能帮忙那就太好了。这就是我现在所做的。
function deleteme(id){
//something like this
var item = this._getItemByFileId(id);
qq.remove(this._find(item));
}
fileTemplate:'<li>' +
'<span class="qq-upload-file"></span>' +
'<span class="qq-upload-spinner"></span>' +
'<span class="qq-upload-size"></span>' +
'<a class="qq-upload-cancel" href="#">Cancel</a>' +
'<span class="qq-upload-failed-text">Failed</span>' +
'<a class="qq-upload-del-text" href="javascript:deleteme(this.id);">Delete</a>' +
'</li>',
提前谢谢。
我使用的是FileUploaderBasic版本,遇到了同样的问题。所以我自己动手去除
以下是完整的示例:
var $fub = $('#fine-uploader-basic'),
$messages = $('#upload-messages');
// try the basic uploader
var uploader = new qq.FileUploaderBasic({
button: $fub[0],
action: base_ajax_url + 'upload',
debug: true,
autoUpload: false,
allowedExtensions: ['jpeg', 'jpg', 'gif', 'png'],
sizeLimit: 204800, // 200 kB = 200 * 1024 bytes
// the method name really should be onSelect
onSubmit: function(id, fileName) {
var _self = this;
var entry = $('<div id="file-' + id + '" class="alert" style="margin: 10px 0 0">' + fileName + ' <span class="qq-upload-cancel close">×</span></div>'
).appendTo(
$messages[0]
).find('.qq-upload-cancel').click(function() {
_self._storedFileIds.splice(_self._storedFileIds.indexOf(id) , 1);
$($(this).parent()).remove();
return false;
});
},
onUpload: function(id, fileName) {
$('#file-' + id).addClass('alert-info')
.html('<img src="/sites/all/themes/pb_admin/images/loading.gif" alt="Initializing. Please hold."> ' +
'Initializing ' +
'"' + fileName + '"');
},
onProgress: function(id, fileName, loaded, total) {
if (loaded < total) {
progress = Math.round(loaded / total * 100) + '% of ' + Math.round(total / 1024) + ' kB';
$('#file-' + id).removeClass('alert-info')
.html('<img src="/sites/all/themes/pb_admin/images/loader.gif" alt="In progress. Please hold."> ' +
'Uploading ' +
'"' + fileName + '" ' +
progress);
} else {
$('#file-' + id).addClass('alert-info')
.html('<img src="/sites/all/themes/pb_admin/images/loader.gif" alt="Saving. Please hold."> ' +
'Saving ' +
'"' + fileName + '"');
}
},
onComplete: function(id, fileName, responseJSON) {
if (responseJSON.success) {
$('#file-' + id).removeClass('alert-info')
.addClass('alert-success')
.html('<i class="icon-ok"></i> ' +
'Successfully saved ' +
'"' + fileName + '"');
} else {
$('#file-' + id).removeClass('alert-info')
.addClass('alert-error')
.html('<i class="icon-exclamation-sign"></i> ' +
'Error with ' +
'"' + fileName + '": ' +
responseJSON.error);
}
}
});
(Submit上的名称有点可疑…无论如何)
我试图调用onCancel方法(但抛出未定义的异常)。
然后这个方法就可以工作了——从_storedFileIds数组中删除id。就是这样。
相关文章:
- Javascript:下载后从文件夹中删除文件
- 烧瓶 - 下载后删除文件
- 使用 jQuery 从 HTML 中的多个图像元素中删除文件路径
- 使用FSO创建或删除文件夹
- WinJS从LocalState文件夹中删除文件夹
- 使用 ajax 请求删除文件
- 没有文件写入的 PHP 脚本正在删除文件信息
- 如何使用javascript从文件夹中删除文件
- 使用 nodejs 下载文件后删除文件
- 如何在将文件发送到服务器之前删除文件
- 当我们使用 ajax post 请求上传文件时,如何取消将文件上传到服务器并删除文件(在上传未完成之间)
- PHP / js - 如何在页面卸载时删除文件
- 由于添加或删除文件而导致的文件冲突,引导弹出框不起作用
- 如何从Dropzone上传和删除文件.js
- 如何从 Node.js 访问、检索、存储和删除文件到远程文件服务器中
- 从 GridFS 中删除文件
- 删除文件时无法检测到 chrome 扩展名中的删除事件
- 取消链接代码以从服务器中删除文件的位置
- 如何从服务器中删除文件
- 通过 Web 界面从服务器中删除文件