清除文件上傳後在valums上傳ajax文件上傳

Question

我終於設法讓valums文件上傳在所有瀏覽器中工作。現在，一旦文件上傳，它仍然顯示剛剛在文件輸入字段下方的li中上傳的文件。 我需要刪除這個li，因爲我提交了一個完整的表單，並且提交後會重置ajax。因此需要刪除以前的文件名。

任何幫助？

 <script type="text/javascript"> 

    var ID=""; 
    $(document).ready(function(e) { 
     var uploader = new qq.FileUploader({ 
     element: document.getElementById('fine-uploader'), 
     debug:true, 
     action: '<?PHP echo base_url();?>index.php/teacher/addBook', 
     allowedExtensions: ['jpeg', 'jpg', 'gif', 'png'], 
     autoUpload:false, 
     multiple:false, 
       template: '<div style="margin-left:0px !important; margin-top:10px" class="qq-uploader span3">' + 
       '<pre class="qq-upload-drop-area span12"><span>{dragText}</span></pre>' + 
       '<div class="qq-upload-button btn btn-success" style="width: auto;">{uploadButtonText}</div>' + 
       '<ul class="qq-upload-list" style="margin-top: 10px; text-align: center; width:280px"></ul>' + 
       '</div>', 
     uploadButtonText: '<i class="icon-upload icon-white"></i> Upload Book Cover', 
     onComplete:function(id,fileName,responseJSON){ 
      ID=responseJSON.id; 
      }, 

     classes: { 
      button: 'qq-upload-button', 
      drop: 'qq-upload-drop-area', 
      dropActive: 'qq-upload-drop-area-active', 
      dropDisabled: 'qq-upload-drop-area-disabled', 
      list: 'qq-upload-list', 
      progressBar: 'qq-progress-bar', 
      file: 'qq-upload-file', 
      spinner: 'qq-upload-spinner', 
      finished: 'qq-upload-finished', 
      size: 'qq-upload-size', 
      cancel: 'qq-upload-cancel', 
      failText: 'qq-upload-failed-text', 
      success: 'alert alert-success', 
      fail: 'alert alert-error', 
      successIcon: null, 
      failIcon: null 
     } 

    }); 

    $("#add_book").click(function(){ 


      ready=true; 
      if($("#name").val()=="") 
      { 
       $("#name").css('background-color','#FFF2F2').css('border-color','red'); ready=false; 
      } 

      if($("#author").val()=="") 
      { 
       $("#author").css('background-color','#FFF2F2').css('border-color','red'); ready=false; 
      } 

      if($("#isbn").val()=="") 
      { 
       $("#isbn").css('background-color','#FFF2F2').css('border-color','red'); ready=false; 
      } 

      if($("#subject").val()=="") 
      { 
       $("#subject").css('background-color','#FFF2F2').css('border-color','red'); ready=false; 
      } 
      if($("#ageGroup").val()=="") 
      { 
       $("#ageGroup").css('background-color','#FFF2F2').css('border-color','red'); ready=false; 
      } 
      if(ready) 
      { 
       uploader.setParams({name:$("#name").val(),author:$("#author").val(),isbn:$("#isbn").val(),subject:$("#subject").val(),age:$("#ageGroup").val()}); 
       uploader.uploadStoredFiles(); 
       $("#name").val(""); 
       $("#author").val(""); 
       $("#isbn").val(""); 
       $("#subject").val(""); 
       $("#ageGroup").val("")      
      } 


     }); 



    }); 
     </script> 
      <div class="page"> 
      <div class="menu"><a href="#">Books</a> &nbsp;| &nbsp;<a href="#" class="active">Students</a></div> 
       <h2>Add New Book</h2> 
           <div class="send-form" id="book_form" > 

          <p style="float:left"> 
          <label>Book Title:</label> 
          <input class="u-3" name="name" id="name" /> 
          </p> 

          <p style="float:right"> 
          <label>Book Author</label> 
          <input class="u-3" name="author" id="author" /> 
          </p> 
          <p style="float:left"> 
          <label>Book ISBN</label> 
          <input class="u-3" name="isbn" id="isbn" /> 
          </p> 


          <p style="float:right"> 
          <label>Subject</label> 
          <input class="u-3" name="subject" id="subject" /> 
          </p> 

          <p style="float:left"> 

          <div id="fine-uploader" style="margin-left:0px !important"> 

          </div> 
          </p> 
          <p style="float:right; width:250px; margin-top:10px; margin-right:-10px"> 
          <label>Age group (eg. 8-12)</label> 
          <input class="u-3" name="ageGroup" id="ageGroup" /> 

          </p> 

Answer 1

Fine Uploader 3.0具有重置/處置功能。當我編寫它的時候，我並不是100％確定開發人員將如何使用它，所以它可能會使用一些改進，但其中包括清除上傳文件的列表（如果您使用FineUploader，而不是FineUploaderBasic ）。

請注意，3.0計劃於11月19日發佈，但如果您願意，可以立即構建快照版本。

Answer 2

您必須包括：

fnOnAdding: function(data) 
    { 
     $('#fine-uploader').reset(); 
     return true; 
    }, 

但是，在我的情況下，可編輯的數據表它將使整個表，而我期待僅重設FileUploader相關對象。除此之外，它的作品。

Answer 3

我不知道這是否是同樣的問題，但是看看這個話題：

Delete Specific File From the List of Uploads

好吧，我做了什麼，在fileuploader.js從來就改變了filetemplate 從來就推吞下一個ID爲<li>名單，所以在我的HTML文件（其實ASPX）我寫了一個樣式爲他們

在fileuploader.js

定位

fileTemplate: '<li id="listaArquivos">' + 
      '<span class="qq-upload-file"></span>' + 
      '<span class="qq-upload-spinner"></span>' + 
      '<span class="qq-upload-size"></span>' + 
      '<a class="qq-upload-cancel" href="#">Cancel</a>' + 
      '<span class="qq-upload-failed-text">Failed</span>' + 
     '</li>' 

<style> 
     #listaArquivos 
     { 
      display: none; 
     } 
</style> 

因此，該名單已經消失。