Jak zidentyfikować postęp pliku?

Question

Jeśli chodzi o jQuery File Upload, istnieje zdarzenie progress, które przekazuje obiekt data, który jak rozumiem, raportuje postęp każdego pliku.

Dodaję paski pliku i postępu do mojego interfejsu użytkownika poprzez zdarzenie add() i chcę później zaktualizować odpowiednie paski postępu w wydarzeniu progress(). Problemem, który mam, jest to, jak je dopasować?

Muszę nadać każdemu plikowi unikalny identyfikator, aby można go było sparować, ale jedno nie zostało dostarczone, o ile widzę. Jak mamy to zrobić?

Czy jest jakiś kod skrótu JavaScript dla każdego obiektu pliku?

Niektóre kodu:

$('#fileupload').fileupload({ 
    url: 'api/combox_upload.php', 
    dataType: 'json', 
    dropZone: $dropZone, 
    done: function (e, data) { 
     $.each(data.result, function(index, file) { 
      // indicate completeness 
     }); 
    }, 
    add: function(e, data) { 
     $.each(data.files, function(index, file) { 
      console.log(file); 
      $file_uploads.append($('<li>').text(file.name)); 
     }); 
     data.submit(); // start upload immediately 
    }, 
    progress: function(e, data) { 
     console.log(data); 
    } 
}); 

---

myślę mogę dołączyć unikatowy identyfikator dla każdego pliku wykorzystując $.data tak:

var fileId = 0; 

$('#fileupload').fileupload({ 
    url: 'api/combox_upload.php', 
    dataType: 'json', 
    dropZone: $dropZone, 
    done: function (e, data) { 
     $.each(data.result, function(index, file) { 
      // indicate completeness 
     }); 
    }, 
    add: function(e, data) { 
     $.each(data.files, function(index, file) { 
      //console.log(file); 
      console.log(filename, fileId); 
      $.data(file, 'id', fileId++); 
      $file_uploads.append($('<li>').text(file.name)); 
     }); 
     data.submit(); // start upload immediately 
    }, 
    progress: function(e, data) { 
     var progress = parseInt(data.loaded/data.total * 100, 10); 
     $.each(data.files, function(index, file) { 
      console.log($.data(file,'id'), file.name, progress); 
     }); 
     //console.log(data); 
    } 
}); 

część, że jestem zdezorientowany o to, że w trakcie postępu nie daje tylko jednego pliku, daje tablicę zawierającą 1 plik ... Nie jestem pewien, czy to jest gwarantowane aby zawsze mieć dokładnie 1 plik (data.files) lub nie.

Answer 1

należy po prostu przeczytać sekcję o nazwie How to tie a file to an element node during the life cycle of an upload:

$(function() { 
    $('#fileupload').fileupload({ 
     dataType: 'json', 
     add: function (e, data) { 
      data.context = $('<p/>').text('Uploading...').appendTo(document.body); 
      data.submit(); 
     }, 
     done: function (e, data) { 
      data.context.text('Upload finished.'); 
     } 
    }); 
}); 

Answer 2

Nie wysłałeś swojego kodu, który faktycznie wywołuje wysyłanie lub wiązanie pliku do zdarzenia postępu, ale domyślam się, że wystarczy umieścić opakowanie $.proxy wokół funkcji fileuploadprogress.

Funkcja $.proxy pozwala określić, co będzie oznaczać w funkcji. Następnie w twojej funkcji będziesz mieć dostęp do data i this, będziesz mógł podać kontekst.