진행 상황을 확인하는 방법은 무엇입니까?

Question

jQuery File Upload에 대해서는 data 개체를 다시 전달하는 progress 이벤트가 있는데,이 개체는 내가 이해할 때 각 파일의 진행률을보고합니다.

add() 이벤트를 통해 내 UI에 파일 및 진행률 막대를 추가하고 나중에 progress() 이벤트의 각 진행률 막대를 업데이트하고 싶습니다. 내가 가지고있는 문제는 내가 어떻게 그들을 일치 시키는가?

각 파일에 고유 한 ID를 부여해야 쌍을 이루어 낼 수 있지만 필자가 볼 수있는 한 제공되지 않습니다. 어떻게해야할까요?

각 File 객체에 대한 JavaScript 해시 코드가 있습니까?

일부 코드 :

$('#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); 
    } 
}); 

---

내가 생각 내가 지금처럼 $.data을 이용하여 각 파일에 고유 한 ID를 첨부 할 수 있습니다

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); 
    } 
}); 

내가 혼란 스러워요 부분을 지금은 progress 이벤트에서 단지 하나의 파일을 제공하는 것이 아니라 하나의 파일을 보유하는 배열을 제공합니다 ... 확실한 지 확실하지 않습니다. 항상 거기에 정확히 1 개의 파일 (data.files)이 있어야합니다.

Answer 1

난 그냥 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

사실 파일 업로드 또는 진행 이벤트 바인딩을 호출하는 코드를 게시하지 않았지만 내 생각에 fileuploadprogress 함수 주위에 $.proxy 래퍼를 놓아야합니다.

$.proxy 기능을 사용하면 기능에서 참조 할 내용을 this으로 지정할 수 있습니다. 그런 다음 함수 내에서 data에 액세스 할 수 있으며 this은 컨텍스트를 제공 할 수 있습니다.