jQuery FileUpload không kích hoạt 'done'

Question

Tôi sử dụng plugin jQuery-File-Upload. Tôi đã viết một mã đơn giản để kiểm tra nó - và nó hoạt động, nhưng không phải là không có vấn đề gì. Nó không kích hoạt done, ngay cả khi tệp được tải lên và thanh tiến trình đã kết thúc.

Dưới đây là các mã:

$('#file_file').fileupload({ 
    dataType: 'json', 
    autoUpload: true, 
    add: function (e, data) { 
     data.context = $('<p/>').text('Uploading...').appendTo(document.body); 
     data.submit(); 
    }, 
    progressall: function (e, data) { 
     var progress = parseInt(data.loaded/data.total * 100, 10); 
     $('#progress .bar').css(
      'width', 
      progress + '%' 
     ); 
    }, 
    done: function (e, data) { 
     alert('Done'); 
    } 
}); 

đầu vào của tôi là đơn giản như vậy:

<input type="file" id="file_file" name="file[file]" /> 

Answer 1

Tôi đã thay đổi vài thứ và nó hoạt động. Ở đây:

$('#file_file').fileupload({ 
    autoUpload: true, 
    add: function (e, data) { 
     $('body').append('<p class="upl">Uploading...</p>') 
     data.submit(); 
    }, 
    progressall: function (e, data) { 
     var progress = parseInt(data.loaded/data.total * 100, 10); 
     $('#progress .bar').css(
      'width', 
      progress + '%' 
     ); 
    }, 
    done: function (e, data) { 
     $('.upl').remove(); 
     $.each(data.files, function (index, file) { 
      /**/ 
     }); 
    } 
}); 

Answer 2

$(input).fileupload(

     url  : '...' 

     ,dataType : 'json' 
     ,sequentialUploads : true 

     ,add  : function (e,data) { 


      $.each(data.files,function(i,file){ 

       file.jqXHR = data.submit() 
          .success(function (result, textStatus, jqXHR) {/* ... */}) 
          .error(function (jqXHR, textStatus, errorThrown) { 
          }) 
          .complete(function (result, textStatus, jqXHR) { 
           //...     
            }); 

       }); 
     } 


     ,done: function (e, data) { 
     console.log(data); 

     } 


    }); 

công trình hoàn hảo đối với tôi;

khác biệt là

• url được thiết lập (tôi hy vọng bạn chỉ quên đặt nó trong đoạn mã của bạn ở đây);

• cách tôi thêm file để download queue

• tải lên tuần tự

chỉnh sửa (?):

Các jQuery File Upload Plugin tận dụng jQuery.ajax() cho tệp yêu cầu tải lên. Điều này đúng ngay cả đối với các trình duyệt không hỗ trợ cho XHR, nhờ plugin Plugin iframe.

Các tùy chọn được đặt cho plugin Tải tệp lên được chuyển đến jQuery.ajax() và cho phép xác định bất kỳ cài đặt ajax hoặc gọi lại nào. Tùy chọn ajax processData, contentType và bộ nhớ cache được đặt thành false cho tệp video tải lên hoạt động và không được thay đổi.

https://github.com/blueimp/jQuery-File-Upload/wiki/Options

đâu đó trong mã của bạn, bạn có thể có cũng thay đổi những thiết lập ajax; dù sao cũng nói rằng nếu bạn có cài đặt của bạn ngay từ khi nó làm cho việc sử dụng $ .ajax thực hiện không thể không được kích hoạt

Answer 3

tôi sửa chữa với autoUpload: true, nó trông giống như khi tài sản autoUpload không được thiết lập (ngay cả khi tải lên đang làm việc như mong đợi) trường hợp thực hiện không được kích hoạt.

Answer 4

Nếu máy chủ của bạn không trở về JSON, hãy thử gỡ bỏ:

dataType: 'json' 

Nếu không, bạn có thể được kết thúc với một sự kiện, đó là dễ dàng để kiểm tra thất bại:

fail: function(e, data) { 
    alert('Fail!'); 
} 

Answer 5

thử nghiệm ngay hôm nay! Nếu bạn đang sử dụng PHP, hãy chắc chắn rằng tệp uploadhanler PHP của bạn không hiển thị lỗi hoặc cảnh báo.Nó tạo ra một đầu ra JSON tồi và khi tệp của bạn được tải lên, plugin không thể gửi một bộ đệm JSON đúng với sự kiện đã thực hiện.

Để theo dõi lỗi trên tệp PHP của bạn, tốt hơn bạn nên ghi tệp nhật ký thay vì lỗi hiển thị trên tập lệnh như vậy. Bạn có thể sử dụng:

error_reporting(0) 

Nhưng KHÔNG QUÊN để thêm theo dõi lỗi trong một tập tin đăng nhập. Tất nhiên !

Answer 6

Hãy thử this Callback Option như mô tả trong tài liệu hướng dẫn:

$('#fileupload').bind('fileuploaddone', function (e, data) { 
    alert('Done'); 
}); 

Nó chắc chắn công trình đối với tôi.

Answer 7

Tôi đang sử dụng multer, multer-azure-storage và tải lên tệp blueimp. tất cả được phục vụ từ unpkg.com. dưới đây là tải lên nhiều tệp với trình kích hoạt đã hoàn tất. làm việc lúc 10/22/17.

js file:

<script src="https://unpkg.com/jquery@3.2.1/dist/jquery.min.js"></script> 
    <script src="https://unpkg.com/blueimp-file-upload@9.19.1/js/vendor/jquery.ui.widget.js"></script> 
    <script src="https://unpkg.com/blueimp-file-upload@9.19.1/js/jquery.iframe-transport.js"></script> 
    <script src="https://unpkg.com/blueimp-file-upload@9.19.1/js/jquery.fileupload.js"></script> 

trang html, phục vụ từ nhanh:

 $('#fileupload').fileupload({ 
      url: 'https://domainwhatevs/my-listings/edit/[property id]/gallery', 
      paramName: '_file', 
      dataType: 'json', 
      type: 'POST', 
      autoUpload: true, 
      add: function (e, data) { 
       console.log('uploading:', data) 
       data.submit(); 
      }, 
      done: function (e, data) { 
       console.log('done triggered'); 
       console.log(data._response.result.result[0].originalname, 'uploaded at', data._response.result.result[0].url); 
       $.each(data.files, function (index, file) { 
       // console.log(file.name, 'uploaded.') 
       // console.log('done'); 
       // console.log(index); 
       // console.log(file); 
       }); 
       console.log(data); 
      } 
     }); 

// GET// chỉnh sửa/[thuộc tính id]-danh sách của tôi/gallery

app.get(
    [ 
     '/my-listings/edit/:_id/gallery' 
    ], 
    (req, res) => { 
     console.log('image gallery:', req.params._id); 
     res.render('my-listings--edit--gallery', { 
      _id: req.params._id, 
      session: req.session 
     }); 
    } 
); 

// ĐĂNG/danh sách của tôi/chỉnh sửa/[id thuộc tính]/gallery

app.post(
    [ 
     '/my-listings/edit/:_id/gallery' 
    ], 
    upload.array('_file'), 
    (req, res, next) => { 
     console.log(req.files); 
     res.setHeader('Content-Type', 'application/json'); 
     res.send({result: req.files}); 
     next(); 
    } 
);