jQuery FileUploadUI単一ファイルアップロード

Question

私のウェブサイトのファイルをアップロードするにはfileuploadui（https://github.com/blueimp/jQuery-File-Upload）を使用していますが、1つだけのファイルにアップロードするようにしたいと思います。

入力htmlタグ（input type = "file" name = "file"）から "multiple"を削除しましたが、キューはまだ1つ以上のファイルを受け入れています。

私が気にしていることは、「ファイルの参照」ボタンをクリックするたびに、現在のキューが新しいファイルで置き換えられることです。それは永久にキュー内の1ファイルになります。

replaceNode関数はどのように使用しますか？

ありがとうございました。

Answer 1

これを試してみてください：

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

はそれが^^単一のファイルへの実際の入力フィールドを制限についてアップロード何

Answer 2

の作品を願って？

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

Answer 3

私はadd関数に次のように追加：

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

を。これは、新しいファイルは最後のファイルだけを確実に追加されるたびに残されているファイルのリストコンテナをクリアします。

希望します。

次のように完全なコードが表示されます：@TopDevへ

<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

おかげで、

1. は<input type="file" name="files[]">
2. が<tbody id="filelistholder" class="files">
、テーブルにIDを追加 "複数の" 属性を削除します
3. 下部のループの内側に、{% for (var i=0, file; file=o.files[i]; i++) { %} {% $('#filelistholder').empty(); %}

0を追加します。

Answer 5

角度とタイプスクリプトの回答（非タイプスクリプトの場合は簡単に対応）。これは私のために働く。コントローラ（typescriptです）で

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

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

maxNumberOfFiles：1、 "複数" を削除し、名前= "ファイル" 設定もanoughtなかったです。

Answer 6

これは私がそれをやった方法です：

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