Tải lên tệp đơn jQuery FileUploadUI

Question

im bằng cách sử dụng tệp tải lên (https://github.com/blueimp/jQuery-File-Upload) để tải tệp lên cho trang web của mình, nhưng tôi muốn làm cho tệp tải lên chỉ 1 tệp chứ không phải nhiều tệp.

tôi đã xóa "nhiều" khỏi thẻ html đầu vào (loại đầu vào = "tệp" name = "tệp"), nhưng hàng đợi vẫn chấp nhận nhiều hơn 1 tệp.

những gì tôi có trong tâm trí là, bất cứ khi nào ai đó nhấp vào nút "Duyệt tệp", nó sẽ thay thế hàng đợi hiện tại bằng tệp mới. nó sẽ là mãi mãi 1 tập tin trong hàng đợi.

làm cách nào để tôi sử dụng hàm replaceNode?

cảm ơn.

Answer 1

Hãy thử điều này:

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

Hy vọng nó hoạt động ^^

Answer 2

gì về hạn chế các lĩnh vực đầu vào thực tế để tập tin duy nhất tải lên?

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

Answer 3

Tôi được thêm vào sau trong add chức năng:

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

này sẽ xóa danh sách tập tin chứa mỗi khi một tập tin mới được bổ sung đảm bảo chỉ các tập tin cuối cùng còn lại.

Hy vọng điều đó sẽ hữu ích.

Vì vậy, toàn bộ mã sẽ trông như sau:

<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

Nhờ @TopDev,

1. Tháo "nhiều" thuộc tính <input type="file" name="files[]">
2. Thêm id để bàn, <tbody id="filelistholder" class="files">
3. Bên trong vòng lặp ở dưới cùng, thêm {% for (var i=0, file; file=o.files[i]; i++) { %} {% $('#filelistholder').empty(); %}

Answer 5

Trả lời cho góc cạnh và bản ghi (dễ dàng thích ứng với không có bản ghi). Điều này làm việc cho tôi.

<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> 

Trong điều khiển (nguyên cảo)

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

maxNumberOfFiles: 1, loại bỏ "nhiều" và thiết lập name = "file" cũng là không anought.

Answer 6

đây là cách tôi đã làm nó: làm việc

//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 
    });