任何想法是什麼？

我有這樣的代碼：任何想法是什麼？

$("#uploadMe").change(function(e) { 
      var input = $(this); 
      var file = input[0].files[0]; 
      var fileName = file.name; 
      var template = '<div class="j_upload_item">' + 
            '<span class="j_label">Uploading <pre></pre></span>' + 
            '<div class="j_upload_progress progress progress-striped active">' + 
             '<div class="bar" style="width: 0%"></div>' + 
            '</div>' + 
           '</div>'; 

      box = $("#j_upload_box").append(template); 
      box.hide(); 
      box.fadeIn(200); 
      box.find('pre').text(fileName); 
      bar = box.find('.bar'); 

      formData = new FormData($('form')[1]); 
      $.ajax({ 
       url: '/admin/callbacks/upload.php?type=email-attachment', //server script to process data 
       type: 'POST', 
       xhr: function() { // custom xhr 
        var myXhr = $.ajaxSettings.xhr(); 
        if(myXhr.upload){ // check if upload property exists 
         myXhr.upload.addEventListener('progress',progressHandler, false); // for handling the progress of the upload 
        } 
        return myXhr; 
       }, 
       //Ajax events 
       beforeSend: beforeSendHandler, 
       success: successHandler, 
       error: errorHandler, 
       // Form data 
       data: formData, 
       //Options to tell JQuery not to process data or worry about content-type 
       cache: false, 
       contentType: false, 
       processData: false 
      }); 

      function beforeSendHandler(e) { 
       bar.css('width', '0%'); 
      } 
      function successHandler(data) { 
       data = $.parseJSON(data); 

       bar.parent('div').addClass('progress-success'); 
       bar.css('width', '100%').delay(3000).queue(function(next) { 
        box.fadeOut(500); 
        next(); 
       }); 
       var curval = $("#j_attachments").val(); 
       var arr = $.makeArray(curval); 
       arr.push(data.name); 

       $("#j_attachments").val(arr); 
      } 
      function errorHandler(e) { 
       console.log(e); 
      } 
      function progressHandler(e) { 
       bar.css('width', ((e.loaded/e.total) + '%')); 
      } 

     });

$("uploadMe")是一個文件輸入。這個腳本應該上傳的文件，並顯示通過template定義一個小的進度框。取而代之的是箱子淡出，並要離開就像他們應該，他們一直在每次change事件被觸發時彈出。

所以會發生什麼是我結束了堆放在裏面同樣的東西彼此頂部3盒。

如果您需要澄清只是問。這實在是煩人我:(

來源

2013-05-27 watzon

問題的最愚蠢的標題，你可能剛剛說過「我有問題」 – jammykam

「我有一個問題」 – watzon

試試這個： -

Fiddle

 bar.css('width', '100%').delay(3000).queue(function(next) { 
      box.fadeOut(500,function(){ 
       $(this).empty(); //empty the container. 
      }); 
      next(); 
      });

問題是，你添加的j_upload_item每次而不是清空容器和淡入是在容器上以便它只是彈出它獲取每個文件上傳過程中隨時間積累的附加信息。

來源

2013-05-27 22:02:49 PSL

它的工作原理！現在唯一的問題是一次只能處理一件事。有任何想法，如果這可能會改變？ – watzon

@ sun-tzu請你詳細說明一下。 '一次只能處理一件事' – PSL

一次只能上傳和處理一個文件。當一個文件堆積更多的文件不能同時上傳。 – watzon

我看到你在做

box = $("#j_upload_box").append(template);

這將每一個變化事件被觸發時追加一個新的div ......也許這是你的問題？

來源

2013-05-27 21:46:50

這就是我想要的。但是我希望div能夠淡出並在上傳完成時被刪除。我嘗試使用'remove'，但是這不允許更多的上傳。它追加該框，然後在所有之前附加的框中淡出。 – watzon

你似乎設置相同的變量，「盒子」，每個函數被調用時。也許不是：box = ...你可以嘗試做var box = ...？ –

同樣的效果.... – watzon

任何想法是什麼？

回答

相關問題