jQuery FileUploadUI Przesyłanie pojedynczego pliku

Question

im przy użyciu fileuploadui (https://github.com/blueimp/jQuery-File-Upload) do przesyłania plików do mojej witryny, ale chciałbym, aby przesłać go tylko do jednego pliku, a nie wielu.

Usunąłem "wiele" z wejściowego znacznika html (typ wejścia = "plik" nazwa = "plik"), ale kolejka nadal akceptuje więcej niż 1 plik.

Mam na myśli to, że za każdym razem, gdy ktoś kliknie przycisk "Przeglądaj plik", zastąpi bieżącą kolejkę nowym plikiem. będzie na zawsze 1 plik w kolejce.

Jak korzystać z funkcji replaceNode?

dzięki.

Answer 1

Spróbuj tego:

$('#file_upload').fileUploadUIX({ 
    maxNumberOfFiles: 1 
}); 

Nadzieja to działa ^^

Answer 2

Co o ograniczenie rzeczywistego pola wprowadzania do pojedynczego pliku przesłać?

<%= f.file_field :image, :multiple => false %> 

Answer 3

dodałem następujące w funkcji Add:

$('#filelistholder').empty(); 

To skasuje pojemnik lista plików za każdym razem, gdy nowy plik zostanie dodany zapewniając tylko ostatni plik jest po lewej stronie.

Mam nadzieję, że to pomaga.

Więc pełny kod będzie wyglądać następująco:

<script type="text/javascript"> 
     $(function() { 
      $('#fileupload').fileupload({ 
       dataType: "json", 
       url: "/api/upload", 
       limitConcurrentUploads: 1, 
       maxNumberOfFiles: 1, 
       sequentialUploads: true, 
       progressInterval: 100, 
       maxChunkSize: 10000, 
       add: function (e, data) { 
        ///empty fie container every time a new file is added 
        $('#filelistholder').empty(); 
        //add new file 
        $('#filelistholder').removeClass('hide'); 
        data.context = $('<div />').text(data.files[0].name).appendTo('#filelistholder'); 
        $('</div><div class="progress"><div class="bar" style="width:0%"></div></div>').appendTo(data.context); 
        $('#btnUploadAll').click(function() { 
         data.submit(); 
        }); 

       }, 
       done: function (e, data) { 
        data.context.text(data.files[0].name + '... Completed'); 
        $('</div><div class="progress"><div class="bar" style="width:100%"></div></div>').appendTo(data.context); 
       }, 
       progressall: function (e, data) { 
        var progress = parseInt(data.loaded/data.total * 100, 10); 
        $('#overallbar').css('width', progress + '%'); 
       }, 
       progress: function (e, data) { 
        var progress = parseInt(data.loaded/data.total * 100, 10); 
        data.context.find('.bar').css('width', progress + '%'); 
       } 
      }); 
     }); 
    </script> 

Answer 4

Dzięki @TopDev,

1. usunąć "wielokrotne" atrybut <input type="file" name="files[]">
2. Dodaj ID do stołu, <tbody id="filelistholder" class="files">
3. Wewnątrz pętli u dołu dodaj {% for (var i=0, file; file=o.files[i]; i++) { %} {% $('#filelistholder').empty(); %}

Answer 5

Odpowiedź na kanciaste i maszynopis (łatwe dostosowanie do non maszynopisu). To działa dla mnie.

<span class="btn btn-success fileinput-button" type="reset" ng-click="ctrl.formReset(this)"> 
<i class="glyphicon glyphicon-plus"></i> 
<span>Add file...</span> 
<input type="file" name="file" ng-disabled="disabled"> 
</span> 

W sterowniku (nagranie)

formReset(uploadScope):void{ 
    uploadScope.clear() 
    uploadScope.queue = [] 
} 

maxNumberOfFiles: 1, usuwanie "wiele" i ustawienie name = "plik" również nie anought.

Answer 6

to jak to zrobiłem: praca

//flag for limiting to 1 single file 
    var uploading; 
    $('#file1').fileupload({ 
     dataType: 'json', 
     done: function(e, data) { 
     //... 
     }, 
     progressall: function(e, data) { 
     }, 
     add: function (e, data) { 
      if (!uploading) { 
       uploading = 1; 
       console.log('add'); 
       data.submit(); 
      } else { 
       console.log('cancel'); 
      } 
     }, 
     always: function() { 
      uploading = 0; 
     }, 
     sequentialUploads: true 
    });