Làm cách nào để gọi một cuộc gọi lại JS khi tải lên tệp hoàn tất?

Question

Tôi đang tạo tải lên giao diện người dùng cho một ứng dụng có phụ trợ appengine.

Điều tôi muốn làm là giải pháp tải lên tệp và tôi không muốn sử dụng plupload hoặc các loại giải pháp sẵn sàng.

Tôi về cơ bản đã gửi hình ảnh vào khung nội tuyến và sau đó đặt bìa trong khi đang tải lên. Sau đó, sau khi nó kết thúc, tôi đã thực hiện một cuộc gọi ajax để lấy các id hình ảnh cho khung nhìn tiếp theo được hiển thị. Tuy nhiên, kết xuất luôn được gọi trước khi quá trình tải lên hoàn tất, do đó tôi không nhận được bất kỳ id hình ảnh nào từ chương trình phụ trợ. có ai giúp được không?

đây là mã của tôi cho upload

perform_input3:(event)=> 
    event.preventDefault() 
    $('#product-input-3').hide() 
    $('#product-input-3').submit() 
    $('#upload-cover').show() 
    item_id = $('#item3_id').val() 
    app.views.imageselect.render(item_id) 

các app.views.imageselect.render (item_id) là dưới đây:

render:(data)=> 
    @item_id = data 
    item_id = @item_id 
    $.ajax(
     url: '/get_image_list/' 
     type: 'GET' 
     dataType: 'json' 
     data: {item_id: item_id} 
     success:(data) => 
      @payload = data 
      $(@el).append imageSelectTemplate(@payload) 
      return @ 
    ) 

Tôi không muốn trở thành sử dụng chức năng setTimeout vì nó sẽ không linh hoạt tùy thuộc vào tốc độ kết nối. Bất kỳ trợ giúp nào cũng sẽ được đánh giá cao :)

Answer 1

Về cơ bản, câu hỏi của bạn tóm tắt điều này: Bạn muốn đợi để thực hiện cuộc gọi Ajax đến máy chủ cho đến khi dữ liệu bạn yêu cầu có sẵn. Việc nhận thông báo từ máy chủ rất phức tạp (tùy thuộc vào cách chương trình phụ của bạn được triển khai), vì vậy giải pháp tốt nhất cho vấn đề của bạn có thể chỉ cần thực hiện cuộc gọi Ajax định kỳ (nói, một lần mỗi giây) cho đến khi bạn nhận được phản hồi thành công từ máy chủ.

Dưới đây là một số mã mà nên làm điều đó:

do ajaxCall = => 
    $.ajax 
    url: '/get_image_list/' 
    type: 'GET' 
    dataType: 'json' 
    data: {item_id: item_id} 
    success: (data) => 
     @payload = data 
     $(@el).append imageSelectTemplate(@payload) 
    error: -> 
     setTimeout ajaxCall, 1000 

Answer 2

gì bạn đang thiếu một số loại gọi lại từ $('#product-input-3').submit() gọi là. Tôi nghĩ sau đây sẽ làm việc (tha thứ CoffeeScript xấu của tôi):

perform_input3:(event)=> 
    event.preventDefault() 
    item_id = $('#item3_id').val() 
    $('#product-input-3').hide() 
    $('#upload-cover').show() 
    $('#product-input-3').submit() 
    $('#target-iframe').ready -> 
     app.views.imageselect.render(item_id) 

này được xác định trên ý tưởng rằng gọi 'submit' ngay lập tức đặt iframe mục tiêu vào trạng thái không sẵn sàng, mà có vẻ hợp lý, nhưng tôi 'd kiểm tra nó. Một khi nó kết thúc tải Các tùy chọn khác tôi đã nhìn thấy xung quanh là có trang iframe tải gọi lại vào cửa sổ cha mẹ (cấp cao nhất) của nó. Trong JS, một cái gì đó như:

parent.imageUploaded() 

Hoặc, nếu bạn muốn sử dụng sự kiện ràng buộc:

parent.$(parent.document).trigger('upload-complete') 

đâu, tất nhiên, bạn đã thiết lập một sự kiện upload hoàn tất vào cấp cao nhất đối tượng tài liệu.

Answer 3

Nếu bạn chỉ nhắm mục tiêu các trình duyệt hiện đại, thì FormData của XHR2 có thể cho phép một cách tiếp cận rất đơn giản và thanh lịch.

Khái niệm này là:

• add file (s) dữ liệu nhị phân đến một đối tượng FormData
• làm cho một $ .ajax() gọi với đối tượng FormData như tham số "dữ liệu" cuộc gọi của AJAX
• khi tải lên xong, $.callbacks thành công() hoặc complete() của ajax() sẽ được kích hoạt

Cách tiếp cận này hoạt động với Firefox, Chrome, Safari mới nhất - http://caniuse.com/xhr2.

Xem bài đăng này để biết chi tiết: Sending multipart/formdata with jQuery.ajax