Làm cách nào để xác định tiến trình của tệp?

Question

Về jQuery File Upload, có sự kiện progress trả về đối tượng data, như tôi hiểu, báo cáo tiến trình cho mỗi tệp.

Tôi đang thêm tệp và thanh tiến trình vào giao diện người dùng của mình qua sự kiện add() và sau này tôi muốn cập nhật các thanh tiến trình tương ứng của họ bên trong sự kiện progress(). Vấn đề tôi đang gặp là làm thế nào để tôi kết hợp chúng?

Tôi cần phải cung cấp cho mỗi tệp một ID duy nhất để tôi có thể ghép nối chúng, nhưng không được cung cấp ở xa như tôi có thể thấy. Làm thế nào chúng ta phải làm điều này?

Có lẽ một số mã băm JavaScript cho từng đối tượng Tệp không?

Một số mã:

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

---

tôi nghĩ Tôi có thể đính kèm một ID duy nhất cho mỗi tập tin bằng cách sử dụng $.data như vậy:

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

Phần mà tôi đang bối rối bây giờ là trong sự kiện tiến trình, nó không chỉ cung cấp cho bạn một tệp duy nhất, nó cung cấp cho bạn một mảng giữ 1 tệp ... Tôi không chắc chắn nếu nó được đảm bảo luôn có chính xác 1 tệp trong đó (data.files) hay không.

Answer 1

Tôi chỉ cần đọc phần 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

Bạn không đăng mã đang thực sự gọi tệp tải lên hoặc ràng buộc với sự kiện tiến độ, nhưng tôi đoán là bạn chỉ cần đặt một wrapper $.proxy xung quanh chức năng fileuploadprogress.

Chức năng $.proxy cho phép bạn chỉ định nội dung this sẽ tham chiếu trong hàm. Sau đó, bên trong chức năng của bạn, bạn sẽ có quyền truy cập vào data và this sẽ có thể cung cấp ngữ cảnh.