Задача
В настоящее время я использую (https://github.com/blueimp/jQuery-File-Upload/wiki) этот jQuery HTML5 Uploader.
Базовая версия, нет интерфейса.
Большая проблема в том, что я посмотрел везде (Mozilla Developer Network, SO, Google и т. Д.) И не нашел решения для удаления файлов, уже добавленных через dragNdrop или вручную, через диалог ввода файлов.
Почему я хочу добиться удаления файла?
Потому что кажется, что в HTML5 есть своего рода «ошибка».
Если вы удаляете / выбираете файл (для ввода файла установлено несколько файлов), загрузите его, а затем перетащите / выберите другой файл, который у вас теперь волшебным образом есть, новый файл дважды, и он загружается дважды.
Чтобы предотвратить кэширование этого волшебного файла, пользователю необходимо обновить страницу, а это не то, что кто-то хочет иметь для своего современного веб-приложения AJAX.
Что я пробовал до сих пор:
- .RESET ()
- .remove ()
- Кнопка сброса
- Установка .val () в ''
Кажется, это общая проблема JS для HTML5, а не для jQuery.
Теория
Возможно, что $j('#post').click (я связываю / повторно связываю много раз различные обратные вызовы), суммирует методы обратных вызовов так, что каждый раз, когда функция updateFileupload вызывается, устанавливается дополнительный обратный вызов.
Теперь реальная проблема больше не будет зависеть от загрузки HTML5, теперь она будет зависеть от моей возможности, не связывая действие .click с моей кнопкой отправки (id = # post).
Если мы теперь вызываем .unbind перед каждым .click, то не должно быть дубликатов обратного вызова.
код
Функция, содержащая код загрузки:
function updateFileupload (type) {
var destination = "";
switch(type)
{
case upload_type.file:
destination = '/wall/uploadfile/id/<?=$this->id?>';
break;
case upload_type.image:
destination = '/wall/upload/id/<?=$this->id?>';
break;
}
$j('#fileupload').fileupload({
dataType: 'json',
url: destination,
singleFileUploads: false,
autoUpload: false,
dropZone: $k(".dropZone"),
done: function (e, data) {
console.log("--:--");
console.log(data.result);
upload_result = data.result;
console.log(upload_result);
console.log("--:--");
console.log(type);
if(type == upload_type.image)
{
var imageName = upload_result.real;
console.log(imageName);
$k.get('/wall/addpicture/id/<?=$this->id ?>/name'+imageName, function(data){
if(data > 0){
console.log("I made it through!");
if(!data.id)
{
$k('#imgUpload').html('');
//$k('#imgPreview').fadeOut();
$k('#newPost').val('');
$k.get("/wall/entry/id/"+data, function(html){
$k('#postList').prepend(html);
});
}
}
});
}
},
send: function(e, data){
var files = data.files;
var duplicates = Array(); // Iterate over all entries and check whether any entry matches the current and add it to duplicates for deletion
for(var i=0; i<data.files.length;i++)
{
for(var j=0;j<data.files.length-1;j++)
{
if(files[i].name == files[j].name && i != j)
{
duplicates.push(j);
}
}
}
if(duplicates.length > 0)
{
for(var i=0;i<duplicates.length;i++)
files.splice(i, 1);
}
console.log("Duplicates");
console.log(duplicates);
},
drop: function(e, data){
console.log("outside");
// $k.each(data.files, function(index, file){
// $k('#imageListDummy').after('<li class="file-small-info-box">'+file.name+'</li>');
// console.log(file);
//
// });
},
add: function(e, data){
upload_data = data;
console.log(data);
$k.each(data.files, function(index, file){
$k('#imageListDummy').after('<li class="file-small-info-box">'+file.name+'</li>');
console.log(file);
});
$j('#post').click(function(event){
upload_data.submit();
if(type == upload_type.image)
{
var file = upload_data.files[0];
console.log("I am here");
console.log(file);
var img = document.createElement("img");
img.src = window.URL.createObjectURL(file);
img.height = 64;
img.width = 64;
img.onload = function(e) {
window.URL.revokeObjectURL(this.src);
}
document.getElementById('imgPreview').appendChild(img);
$k('#imgPreview').show();
}
clickPostCallback(event);
});
$j('#showSubmit').show();
}
});
}