Очистить список файлов после загрузки в Valums AJAX загрузчик файлов
Мне наконец удалось заставить загрузчик файла valums работать во всех браузерах. Теперь, как только файл загружен, он все еще показывает файл, только что загруженный в li прямо под полем ввода файла. Мне нужно удалить этот li, так как я отправляю полную форму с ajax, которая сбрасывается после отправки. Поэтому предыдущее имя файла необходимо удалить.
Любая помощь?
<script type="text/javascript">
var ID="";
$(document).ready(function(e) {
var uploader = new qq.FileUploader({
element: document.getElementById('fine-uploader'),
debug:true,
action: '<?PHP echo base_url();?>index.php/teacher/addBook',
allowedExtensions: ['jpeg', 'jpg', 'gif', 'png'],
autoUpload:false,
multiple:false,
template: '<div style="margin-left:0px !important; margin-top:10px" class="qq-uploader span3">' +
'<pre class="qq-upload-drop-area span12"><span>{dragText}</span></pre>' +
'<div class="qq-upload-button btn btn-success" style="width: auto;">{uploadButtonText}</div>' +
'<ul class="qq-upload-list" style="margin-top: 10px; text-align: center; width:280px"></ul>' +
'</div>',
uploadButtonText: '<i class="icon-upload icon-white"></i> Upload Book Cover',
onComplete:function(id,fileName,responseJSON){
ID=responseJSON.id;
},
classes: {
button: 'qq-upload-button',
drop: 'qq-upload-drop-area',
dropActive: 'qq-upload-drop-area-active',
dropDisabled: 'qq-upload-drop-area-disabled',
list: 'qq-upload-list',
progressBar: 'qq-progress-bar',
file: 'qq-upload-file',
spinner: 'qq-upload-spinner',
finished: 'qq-upload-finished',
size: 'qq-upload-size',
cancel: 'qq-upload-cancel',
failText: 'qq-upload-failed-text',
success: 'alert alert-success',
fail: 'alert alert-error',
successIcon: null,
failIcon: null
}
});
$("#add_book").click(function(){
ready=true;
if($("#name").val()=="")
{
$("#name").css('background-color','#FFF2F2').css('border-color','red'); ready=false;
}
if($("#author").val()=="")
{
$("#author").css('background-color','#FFF2F2').css('border-color','red'); ready=false;
}
if($("#isbn").val()=="")
{
$("#isbn").css('background-color','#FFF2F2').css('border-color','red'); ready=false;
}
if($("#subject").val()=="")
{
$("#subject").css('background-color','#FFF2F2').css('border-color','red'); ready=false;
}
if($("#ageGroup").val()=="")
{
$("#ageGroup").css('background-color','#FFF2F2').css('border-color','red'); ready=false;
}
if(ready)
{
uploader.setParams({name:$("#name").val(),author:$("#author").val(),isbn:$("#isbn").val(),subject:$("#subject").val(),age:$("#ageGroup").val()});
uploader.uploadStoredFiles();
$("#name").val("");
$("#author").val("");
$("#isbn").val("");
$("#subject").val("");
$("#ageGroup").val("")
}
});
});
</script>
<div class="page">
<div class="menu"><a href="#">Books</a> | <a href="#" class="active">Students</a></div>
<h2>Add New Book</h2>
<div class="send-form" id="book_form" >
<p style="float:left">
<label>Book Title:</label>
<input class="u-3" name="name" id="name" />
</p>
<p style="float:right">
<label>Book Author</label>
<input class="u-3" name="author" id="author" />
</p>
<p style="float:left">
<label>Book ISBN</label>
<input class="u-3" name="isbn" id="isbn" />
</p>
<p style="float:right">
<label>Subject</label>
<input class="u-3" name="subject" id="subject" />
</p>
<p style="float:left">
<div id="fine-uploader" style="margin-left:0px !important">
</div>
</p>
<p style="float:right; width:250px; margin-top:10px; margin-right:-10px">
<label>Age group (eg. 8-12)</label>
<input class="u-3" name="ageGroup" id="ageGroup" />
</p>
3 ответа
Fine Uploader 3.0 имеет функцию сброса / удаления. Когда я писал его, я не был уверен на 100%, как разработчики будут его использовать, поэтому он может использовать некоторые улучшения, но он, помимо прочего, очистит список загруженных файлов (если вы используете FineUploader, а не FineUploaderBasic).).
Обратите внимание, что 3.0 планируется выпустить 19 ноября, но вы можете создать версию моментального снимка сейчас, если хотите.
Вы должны включить:
fnOnAdding: function(data)
{
$('#fine-uploader').reset();
return true;
},
Но, в моем случае, с редактируемой таблицей данных он сбрасывает всю таблицу, в то время как я ожидал сбросить только связанные с FileUploader объекты. Кроме того, это работает.
Я не знаю, если это тот же вопрос, но взгляну на эту тему:
Удалить определенный файл из списка загрузок
Хорошо, что я сделал, в файле uploader.js я изменил шаблон файла, который я вставил идентификатор в <li> список, так что в моем HTML-файле (на самом деле aspx) я написал стиль для них
в fileuploader.js найдите
fileTemplate: '<li id="listaArquivos">' +
'<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>' +
'</li>'
<style>
#listaArquivos
{
display: none;
}
</style>
Так что это исчезло со списком.