Очистить список файлов после загрузки в загрузчик файлов Valuems ajax

Наконец-то мне удалось заставить загрузчик файлов Valuems работать во всех браузерах. Теперь, когда файл загружен, он по-прежнему показывает только что загруженный файл в 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> &nbsp;| &nbsp;<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>

person beNerd    schedule 15.11.2012    source источник
comment
опубликуйте html загрузчика файлов после загрузки файла   -  person rahul    schedule 15.11.2012


Ответы (3)


Fine Uploader 3.0 имеет функцию сброса/удаления. Когда я писал его, я не был на 100% уверен, как его будут использовать разработчики, так что, возможно, потребуется какое-то улучшение, но, среди прочего, он очистит список загружаемых файлов (если вы используете FineUploader, а не FineUploaderBasic ).

Обратите внимание, что выпуск 3.0 запланирован на 19 ноября, но при желании вы можете создать моментальную версию сейчас.

person Ray Nicholus    schedule 16.11.2012

Вы должны включить:

 fnOnAdding: function(data)
    {   
      $('#fine-uploader').reset();
      return true;  
    },

Но в моем случае с редактируемой таблицей данных она сбрасывает всю таблицу, в то время как я ожидал сбросить только объекты, связанные с FileUploader. Кроме того, это работает.

person KatosRevenge    schedule 23.11.2012
comment
Ваш код не будет работать. Прежде всего, автор вопроса не использует плагин jQuery для Fine Uploader, поэтому ему/ей придется вызывать uploader.reset(), учитывая тот факт, что экземпляр загрузчика хранится в переменной с именем uploader в соответствии с кодом. вставил в вопрос. Во-вторых, если БЫЛ использован подключаемый модуль jQuery, вы должны сбросить загрузчик, выполнив следующие действия: $('#fine-uploader').fineUploader('reset'). - person Ray Nicholus; 01.12.2012
comment
Вы должны поместить этот совет в документацию для упакованной версии jQuery - мне потребовалось некоторое время, чтобы найти его. - person dan; 18.12.2012

Я не знаю, тот ли это вопрос, но взгляните на эту тему:

Удалить определенный файл из списка загрузок

Ну, что я сделал, так это то, что в файле fileuploader.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>

Так что это исчезло со списком.

person Daniel    schedule 23.04.2013