使用删除上传的列表中的特定文件valums AJAX上传 [英] Delete a specific file from the list of uploads using valums ajax uploader
问题描述
在使用上载的文件 valums AJAX上传我们得到与文件名和文件大小文件的列表。我想名单来与文件名，文件大小和该文件的删除链接。这样，当用户点击删除的文件应该离开所显示的列表。 我成功的让每个文件的删除链接，但因为我有较少的JavaScript知识，无法处理，因为我想要的。如果有人能帮助将是巨大的。 这是我做了什么uptil了。
When uploaded files using valums ajax uploader we get the list of files with file name and file size. I wanted the list to come with file name, file size and a Delete link for the file. So that when the user clicks on delete the file should get out of the list that are displayed. I was successful on getting the delete link on each file but as i have less javascript knowledge was unable to process as i wanted. if anybody can help would be great. This is what i have done uptil now.
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版本，并面临同样的问题。所以，我做了一个DIY删除
I was using the FileUploaderBasic version and faced the same problem. So I did a DIY remove
下面是完整的例子：
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);
}
}
});
（这个名字的onsubmit有点可疑......反正）
(The name onSubmit kinda questionable ... anyway)
我试图调用OnCancel的方法（但抛出异常是不确定的）。
I tried to call the onCancel method (but throw exception that is undefined).
那么这个一期工程 - 从 _storedFileIds 阵列删除ID。就是这样。
Then this one works - by remove the id from the _storedFileIds array. And that's it.
这篇关于使用删除上传的列表中的特定文件valums AJAX上传的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
