Tải lên tệp tải lên tệp Blueimp chỉ một lần

Question

Tôi gặp sự cố lạ này và tôi đã thử một số giải pháp (thậm chí thực hiện giống như bản trình diễn Basic Plus trên trang web của họ). Tôi có thể tải lên các tập tin tốt, đơn hoặc nhiều. Chúng tải lên một lần nhấp vào mục riêng lẻ hoặc nút "Tải lên tất cả". Sự cố đang cố thêm các tệp bổ sung trước hoặc sau khi tải lên. Plugin tải lên tệp sẽ thậm chí không phát hiện thấy những tệp này đang thay đổi trong tệp nhập, vì vậy nó không bao giờ kích hoạt sự kiện "fileuploadadd" và yêu cầu tôi làm mới trang để tải lên nhiều tệp hơn. Tôi tự hỏi liệu sự kiện thay đổi tập tin đang bị mất ở đâu đó, nhưng tôi không thể cho cuộc sống của tôi tìm ra nơi.

Ngoài ra, plugin tải lên tệp blueimp có yêu cầu định dạng trả về cụ thể của JSON không? Vào phút đó, tôi chỉ trả lại "{\"status\":\"success\"} nếu video tải lên thành công và thông báo lỗi tương tự. EDIT: Thay đổi định dạng phản hồi thành ví dụ được hiển thị bởi blueimp không có hiệu lực.

Dưới đây là một số mã cho người tải lên tôi đang sử dụng. Lưu ý rằng tôi hiện đang sử dụng ASP.NET và jQuery 2.0.3 và jQuery UI 1.9.2.

function initFileUploader() { 
    //initProgressBars(); 
    $(upload_progressbar_title).css('display', 'none'); 
    $(upload_progressbar).css('display', 'none'); 
    $(upload_upload).on('click', function() { 
     $(upload_progressbar).css('display', 'block'); 
     $(upload_progressbar_title).css('display', 'block'); 
     $('.uploadbtn').click(); 
    }); 
    $(upload_browse).on('click', function() { 
     $(upload_file).click(); 
     return false; 
    }); 

    $.guid = 0; 
    console.log('initialising file upload'); 

    var uploadButton = $('<input type="button" id="button" />') 
     .addClass('button tiny').addClass('uploadbtn') 
     .prop('disabled', true) 
     .val('Processing...'); 

    var uploadCon = $('<div class="small-4 medium-6 large-6 columns progresscontainer" />') 
      .append('<div class="progressbar" />') 
      .append('<label class="progressbarlabel">Not uploading</label>'); 

    uploadCon.append($(uploadButton).on('click', function() { 
     var $this = $(this), 
      data = $this.parent().data(); 
     $this 
      .off('click') 
      .val('Abort') 
      .on('click', function() { 
       $this.remove(); 
       data.abort(); 
      }); 
     data.submit().always(function() { 
      $this.remove(); 
     }).success(function (result, textStatus, jqXHR) { console.log("Result: " + result + " - TextStatus " + textStatus); }) 
     .error(function (jqXHR, textStatus, errorThrown) { console.log("Error: " + errorThrown + " - TextStatus " + textStatus); }) 
     .complete(function (result, textStatus, jqXHR) { console.log("Result: " + result + " - TextStatus " + textStatus); }); 
    })); 

    $(upload_file).fileupload({ 
     dataType: 'json', 
     autoUpload: false, 
     acceptFileTypes: /(\.|\/)(pdf|jpe?g|png|doc|docx)$/i, 
     maxFileSize: 5000000, // 5 MB 
    }).on('fileuploadadd', function (e, data) { 
     var uniqueId = $.guid++; 
     data.context = $('<div id="div_upload_dcon_' + uniqueId +'" class="row"/>').appendTo(upload_filescon); 
     $.each(data.files, function (index, file) { 
      file.uniqueId = uniqueId; 
      var node = $('<div id="div_fname" class="small-6 medium-4 large-4 columns"/>') 
        .append($('<span/>').text(file.name)); 
      if (!index) { 
       data.url = baseUrl + 'PostUploadFile?fileName=' + data.files[index].name + '&refId=' + ClientRefId + '&upbyid=' + ClientUserId + '&ticketId=' + globalTicketId; 
       var contentNode = (uploadCon.clone(true).data(data)); 
      } 
      node.appendTo(data.context); 
      $(contentNode).appendTo(data.context); 
      $(upload_file).on('change', function() { 
       alert('changing fileinput'); 
      }); 
     }); 
    }).on('fileuploadstart', function (e, data) { 
     initProgressBars(); 
    }).on('fileuploadchange', function (e, data) { 
     alert('changing'); 
    }).on('fileuploadprocessalways', function (e, data) { 
     var index = data.index, 
      file = data.files[index], 
      node = $(data.context.children()[index]); 
     if (file.error) { 
      console.log(file.error)); 
     } 
     if (index + 1 === data.files.length) { 
      $('.uploadbtn').val('Upload').prop('disabled', !!data.files.error); 
     } 
    }).on('fileuploadprogress', function (e, data) { 
     var progress = parseInt(data.loaded/data.total * 100, 10); 
     $('#div_upload_dcon_' + data.files[0].uniqueId).progressbar('value', progress); 
    }).on('fileuploadprogressall', function (e, data) { 
     var progress = parseInt(data.loaded/data.total * 100, 10); 
     $(upload_progressbar).progressbar('value', progress); 
    }).on('fileuploaddone', function (e, data) { 
     getTicketContent(globalTicketId); 
    }).on('fileuploadstop', function (e, data) { 
     $(upload_file).val(''); 
    }).on('fileuploadfail', function (e, data) { 
     $.each(data.files, function (index, file) { 
      var error = $('<span class="text-danger"/>').text('File upload failed.'); 
      $(data.context.children()[index]) 
       .append('<br>') 
       .append(error); 
     }); 
    }); 
} 

Answer 1

Vâng, sau một đêm ngủ và nhiều hơn nữa suy nghĩ về nó, tôi đã chỉ định tùy chọn này

replaceFileInput: false, 

trong khởi động tập tin tải lên. Và đoán xem, nó hoạt động như dự định. Tôi đoán rằng các tập tin đầu vào đã bị mất vì tập tin tải lên nhân bản điều khiển theo mặc định sau khi tải lên hoặc thay đổi.

Cảm ơn bạn đã xem xét bất kỳ ai có thể đã đưa ra điều này, tôi hy vọng nó có ích cho người khác trong tương lai.

Answer 2

Đã hai năm kể từ khi câu trả lời ban đầu, nhưng tôi chỉ figured này ra đối với trường hợp của riêng tôi (:

Nếu bạn sử dụng replaceFileInput: false, mã sẽ không làm việc trong IE9, mà không hỗ trợ các phiên bản mới hơn API tải lên tệp Theo tài liệu, hỗ trợ dự phòng cho trình duyệt này tùy thuộc vào "vận chuyển iframe" yêu cầu phải thay thế phần tử đầu vào của tệp mỗi lần đọc. Đó là đầu mối lớn cho tôi. này:

$(upload_browse).on('click', function() { 
    $(upload_file).click(); 
    return false; 
}); 

Bạn giả định rằng upload_file vẫn là phần tử giống nhau, nhưng nó đã được thay thế bằng một bản sao. Bạn đang kích hoạt sự kiện nhấp chuột trên phần tử nhập tệp cũ. Nó tồn tại, vì vậy bạn sẽ có được hộp thoại trình duyệt hệ thống, nhưng nó không nối với bất kỳ hệ thống ống nước nào.

Vì vậy, giải pháp đúng với hỗ trợ đầy đủ của IE9 là sử dụng "tìm" để định vị upload_file một lần nữa mỗi khi trình xử lý nhấp chuột này được kích hoạt. Bạn không bao gồm mã để thiết lập upload_file, vì vậy tôi không biết bộ chọn chính xác sẽ như thế nào trong trường hợp của bạn, nhưng nó sẽ trông giống như sau:

$(upload_browse).on('click', function() { 
    // You should use a more specific selector, better yet use 
    // find() to locate it inside some div you know is "in scope" so 
    // you don't fire every file input on the page. Just an example 
    $('input[type=file]').click(); 
    return false; 
});