2012-11-09 9 views
10

私はbluimp jQuery-File-Upload-pluginを使用しています。ファイルを選択してアップロードするのは問題ありませんが、ページを更新せずに別のファイルをアップロードしたい場合は、最初のファイルをもう一度アップロードします。私の質問は、ファイルをアップロードした後にファイルを "設定解除"する方法です。ここに私のソースコードblueimpファイルアップロードプラグインで一度だけファイルをアップロードするには?

Javascriptがある:

$('#MappeFile').fileupload({ 
     dataType : 'json', 
     autoUpload : false, 
     maxNumberOfFiles : undefined, 
     maxFileSize : 6000000, 
     minFileSize : undefined, 
     acceptFileTypes : /.+$/i, 
     url : "/ajax/UploadFile.php", 
     add : function(e, data) { 
      $("#testUploadButton").on("click", function() { 
        $('#progress .bar').show(); 
        if ($.browser.msie && parseInt($.browser.version, 10) < 10) { 
         $('#progress .bar').css({ 
          "background" : "url(images/progressbar.gif) no-repeat", 
          "width" : "100%" 
         }) 
        } else { 
         $('#progress .bar').css({ 
          'background-color' : "#2694E8", 
          'width' : '0%' 
         }); 
        } 
       data.submit(); 
      }) 
     }, 
     change : function(e, data) { 
      $.each(data.files, function(index, file) { 
       console.info('Selected file: ' + file.name); 
       filesCount++; 
      }); 
     }, 
     drop: function(e, data) { 
      $.each(data.files, function(index, file) { 
       console.info('Selected file: ' + file.name); 
       filesCount++; 
      }); 
     }, 
     done : function(e, data) { 
      $.each(data.result, function(index, file) { 
       vOutput = "<tr>"; 
       vOutput += "<td>" + file + "</td>"; 
       vOutput += "<tr>"; 
       $("#MappeFileListe").append(vOutput); 
       filesUploaded++; 
       if (filesCount == filesUploaded) { 
        filesUploaded = 0; 
        filesCount=0; 
        $('#progress .bar').hide(); 
       } 
      }); 
     }, 
     progressall : function(e, data) { 
      var progress = parseInt(data.loaded/data.total * 100, 10); 
      $('#progress .bar').css('width', progress + '%'); 
     } 
    }); 

HTML:

<div id="KundeMappe"> 
    <form id="MappeFile"> 
     <input type="file" id="MappeFileSelect" name="files[]" data-url="ajax/UploadFile.php" multiple/> 
     <div id="progress"> 
      <div class="bar" style="width: 0%;"></div> 
     </div> 
     <input type="button" class="neuButton" value="upload" id="testUploadButton"/> 
    </form> 
    <table id="MappeFileListe"></table> 
</div> 

答えて

19

私は答えを自分で見つけ - それは、アップロードした後、ボタンのクリックイベントをバインド解除するのに十分だ:

add : function(e, data) { 
      $("#testUploadButton").on("click", function() { 
        $('#progress .bar').show(); 
        if ($.browser.msie && parseInt($.browser.version, 10) < 10) { 
         $('#progress .bar').css({ 
          "background" : "url(images/progressbar.gif) no-repeat", 
          "width" : "100%" 
         }) 
        } else { 
         $('#progress .bar').css({ 
          'background-color' : "#2694E8", 
          'width' : '0%' 
         }); 
        } 
       data.submit(); 
       $("#testUploadButton").off("click") 
      }) 
     }, 
+1

私は同じ問題があります。しかし、あなたのソリューションでは、他のすべてのリクエストを抑制し、メモリを割り当てます。選択したファイルをアップロードキューに追加しないように、ファイル数を制限する方法は? 'maxNumberOfFiles:1'を設定することはできません。 – static

+1

新しい '$(" testUploadButton ")の前に' $( "#testUploadButton")をoff( "click" ? – static

+3

あなたの解決策は正しい答えではないようですが、私にとってはおかげです。 – VahidNaderi

関連する問題