文件上傳後如何隱藏上傳按鈕？

Question

我正在使用blueimp和jquery UI進行文件上傳。

我想在文件上傳後隱藏此按鈕，如果照片被刪除，再次顯示它。我怎麼能這樣做呢？

這裏是我的HTML：

<form class="fileupload" action="${pageContext.request.contextPath}/someUrl" 
     method="POST" enctype="multipart/form-data"> 
    <noscript><input type="hidden" name="redirect" value="https://www.somedomain.com"/></noscript> 
    <input type="hidden" name="type" value="image1"> 

    <div class="row fileupload-buttonbar"> 
     <div class="col-lg-7"> 
      <span class="btn btn-info fileinput-button"><i class="fa fa-plus"></i> Add one photo... 
       <input type="file" name="image" accept="image/png, image/jpeg"> 
      </span> 
      <span class="fileupload-process"></span> 
     </div> 
     <div class="col-lg-5 fileupload-progress fade"> 
      <div class="progress progress-striped active" role="progressbar" 
       aria-valuemin="0" 
       aria-valuemax="100"> 
       <div class="progress-bar progress-bar-success" style="width:0;"></div> 
      </div> 
      <div class="progress-extended">&nbsp;</div> 
     </div> 
    </div> 
    <table role="presentation" class="table table-striped"> 
     <tbody class="files"></tbody> 
    </table> 
</form> 

的X TMPL：

<!-- The template to display files available for upload --> 
<script id="template-upload" type="text/x-tmpl"> 
{% for (var i=0, file; file=o.files[i]; i++) { %} 
    <tr class="template-upload fade"> 
     <td> 
      <span class="preview"></span> 
     </td> 
     <td> 
      <p class="name">{%=file.name%}</p> 
      <strong class="error text-danger"></strong> 
     </td> 
     <td> 
      <p class="size">Processing...</p> 
      <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><div class="progress-bar progress-bar-success" style="width:0%;"></div></div> 
     </td> 
     <td> 
      {% if (!i && !o.options.autoUpload) { %} 
       <button class="btn btn-info start" disabled> 
        <span>Start</span> 
        <i class="fa fa-caret-right"></i> 
       </button> 
      {% } %} 
      {% if (!i) { %} 
       <button class="btn btn-warning cancel"> 
        <i class="fa fa-trash-o"></i> 
        <span>Remove Photo</span> 
       </button> 
      {% } %} 
     </td> 
    </tr> 
{% } %} 
</script> 
<!-- The template to display files available for download --> 
<script id="template-download" type="text/x-tmpl"> 
{% for (var i=0, file; file=o.files[i]; i++) { %} 
    <tr class="template-download fade"> 
     <td> 
      <span class="preview"> 
       {% if (file.thumbnailUrl) { %} 
        <a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" data-gallery><img src="{%=file.thumbnailUrl%}"></a> 
       {% } else { %} 
        <img src="{%=file.thumbnail_url%}"> 
       {% } %} 
      </span> 
     </td> 
     <td> 
      <p class="name"> 
       {% if (file.url) { %} 
        <a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" {%=file.thumbnailUrl?'data-gallery':''%}>{%=file.name%}</a> 
       {% } else { %} 
        <span>{%=file.name%}</span> 
       {% } %} 
      </p> 
      {% if (file.error) { %} 
       <div><span class="text-danger"><i class="fa fa-exclamation-circle"></i> Error</span> {%=file.error%}</div> 
      {% } %} 
     </td> 
     <td> 
      <span class="size">{%=o.formatFileSize(file.size)%}</span> 
     </td> 
     <td> 
      {% if (file.deleteUrl) { %} 
       <button class="btn btn-danger delete" data-type="{%=file.deleteType%}" data-url="{%=file.deleteUrl%}"{% if (file.deleteWithCredentials) { %} data-xhr-fields='{"withCredentials":true}'{% } %}> 
        <i class="fa fa-trash-o"></i> 
        <span>Remove Photo</span> 
       </button> 
       <input type="checkbox" name="delete" value="1" class="toggle"> 
      {% } else { %} 
       <button class="btn btn-warning cancel"> 
        <i class="fa fa-trash-o"></i> 
        <span>Remove Photo</span> 
       </button> 
      {% } %} 
     </td> 
    </tr> 
{% } %} 
</script> 

最近的文章中，我就已經SO被found不完全相關。

更新：

嘗試回調解決方案，回答了@ZakariaAcharki：

console.log('start') 
$('input[name="image"]') 
    .bind('fileuploadcompleted', function (e, data) { 
     console.log('hiding') 
     $('.fileinput-button').hide(); 
    }) 
    .bind('fileuploaddestroyed', function (e, data) { 
     console.log('showing') 
     $('.fileinput-button').show(); 
    }); 
console.log('ended') 

輸出曰： '開始' 和 '結束'。不知道爲什麼它是not getting fired。

更新2： 隱藏似乎與此工作，但它不顯示。

$('.fileupload') 
    .bind('fileuploaddone', function (e, data) { 
     console.log('hide'); 
     $('.fileinput-button').hide(); 
    }) 
    .bind('fileuploaddestroy', function (e, data) { //tried fileuploaddestroyed too 
     console.log('show'); 
     $('.fileinput-button').show(); 
    }); 

JavaScript的（除了不變tmpl.min.js和jQuery文件上傳/ UI文件）：

/* 
* jQuery File Upload Plugin JS Example 8.9.1 
* https://github.com/blueimp/jQuery-File-Upload 
* 
* Copyright 2010, Sebastian Tschan 
* https://blueimp.net 
* 
* Licensed under the MIT license: 
* http://www.opensource.org/licenses/MIT 
*/ 

/* global $, window */ 

$(function() { 
    'use strict'; 

    var uploadPaths = ["fileA", "fileB", "fileC", "fileCA", "fileCB", "fileCC"]; 

    // Initialize the jQuery File Upload widget: 
    $('.fileupload').each(function (index) { 
     $(this).fileupload({ 
      dropZone: $(this), 
      acceptFileTypes: /(\.|\/)(gif|jpe?g|png|doc|docx|pdf|ppt|pptx)$/i,     maxFileSize: 10000000, // 10 MB 

      // Error and info messages: 
      messages: { 
       acceptFileTypes: 'Sorry, this file type not allowed. Please make sure the extension of the file is either .gif, .jpg, .jpeg, .png, .doc, .docx, .pdf, .ppt, or .pptx.', 
       maxFileSize: 'Please make sure your file is under 10 MB in size.' 
      } 
     }); 

     // Load existing files: 
     $(this).addClass('fileupload-processing'); 
     $.ajax({ 
      // Uncomment the following to send cross-domain cookies: 
      //xhrFields: {withCredentials: true}, 
      url: '/' + uploadPaths[index], 
      context: $(this) 
     }).done(function (data) { 
      $(this).fileupload('option', 'done').call(this, $.Event('done'), {result: {files: data.files}}); 
      $(this).removeClass('fileupload-processing'); 
     }); 
    }); 

    // Enable iframe cross-domain access via redirect option: 
    $('#fileupload').fileupload(
     'option', 
     'redirect', 
     window.location.href.replace(
      /\/[^\/]*$/, 
      '/cors/result.html?%s' 
     ) 
    ); 
}); 

Answer 1

這是解決我們的開發人員介紹，通過使用CSS來隱藏和顯示按鈕，結合fileuploaddone事件。

在阻滯：$('.fileupload').each(function (index)，綁定需要：

$(this).bind('fileuploaddone', function (e, data){ 
    var form = $(this).closest("form"); 
    var uploadButton = form.find(".btn.btn-info.fileinput-button");   
    uploadButton.css("visibility", "hidden"); 
}); 

// Load existing files: 
if (typeof allFiles[index] !== 'undefined')  
    if (typeof allFiles[index] !== 'undefined'){ 
     $(this).fileupload('option', 'done').call(this, $.Event('done'), {result: {files: allFiles[index].files}}); 
     var form = $(this).closest("form"); 
     var uploadButton = form.find(".btn.btn-info.fileinput-button"); 
     uploadButton.css("visibility", "hidden"); 
    } 
    });     
}); 

再後來，使按鈕在markImageAsDeleted功能可見：

var uploadButton = form.find(".btn.btn-info.fileinput-button"); 
uploadButton.css("visibility", "visible"); 

Answer 2

你有沒有嘗試過的回調fileuploadcompleted和fileuploaddestroyed：

$('input[name="image"]') 
    .bind('fileuploadcompleted', function (e, data) { 
     $('.fileinput-button').hide(); 
    }) 
    .bind('fileuploaddestroyed', function (e, data) { 
     $('.fileinput-button').show(); 
    }); 

希望這有助於。