Blueimp Dosya Yükleme Eklentisi sadece bir kez yüklenir

Question

Bu garip soruna sahibim ve çeşitli çözümleri denedim (hatta web sitelerinde Basic Plus demosu ile aynı uygulamayı gerçekleştirdim). Dosyaları iyi, tek veya çoklu olarak yükleyebilirim. Ayrı bir öğenin veya "Tümünü Yükle" düğmesini tıklarlar. Sorun, yüklemeden önce veya sonra ek dosyalar eklemeye çalışıyor. Dosya yükleme eklentisi, bu dosyaların dosya girişinde değiştiğini bile algılamayacaktır, bu yüzden "fileuploadadd" olayını hiç açmaz ve daha fazla dosya yüklemek için sayfayı yenilememi gerektirir. Dosya yükleme olayının bir yerde kaybolup kaybolmadığını merak ediyorum ama hayatımın nerede olduğunu anlayamıyorum.

Ayrıca, blueimp dosya yükleme eklentisi, JSON'un belirli bir dönüş biçimini gerektirir mi? Dakikada, yüklemeler başarılıysa ve benzer bir hata iletisi aldığımda "{\"status\":\"success\"}'u iade ediyorum. DÜZENLEME: Yanıt biçimini blueimp ile gösterilen örneklere dönüştürmenin bir etkisi olmadı.

Kullandığım yükleyici için bazı kodlar. Şu anda ASP.NET ve jQuery 2.0.3 ve jQuery UI 1.9.2 kullandığımı unutmayın.

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

Eh, bir gece uykusu ve daha düşünmeye sonra ben dosya yükleme başlatma sırasında bu seçeneği

replaceFileInput: false, 

belirtilmiş. Ve tahmin et, şimdi olduğu gibi çalışıyor. Dosya yükünün kaybolduğunu tahmin ediyorum çünkü dosya yükleme, bir yükleme veya değişiklikten sonra denetimi varsayılan olarak klonlar.

Bunu vermiş olabileceğiniz herhangi bir düşünce için teşekkürler, umarım gelecekte başkaları için kullanışlı olur.

Answer 2

Orijinal cevap yana iki yıl geçti, ama sadece kendi halinde (bu anladım: Eğer replaceFileInput kullanırsanız

: false, kod yeni desteklemediği hangi IE9 çalışmaz Dosya yükleme API'leri Bu belgenin geri dönüş desteğine göre, bu tarayıcının geri dönüş desteği, dosya girişi elemanının her defasında değiştirilmesini gerektiren bir "iframe aktarımına" bağlıdır. Okuma benim için büyük bir ipucudur.

Gerçekten seni öldürmek nedir? Bu:

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

Yükleme_dosyasının hala aynı öğe olduğunu varsayorsunuz, ancak bir klonla değiştirildi. Eski dosya giriş öğesinde bir tıklama olayı başlatıyorsunuz. Vardır, böylece sisteme göz atma diyaloğunu elde edersiniz, ancak herhangi bir boru tesisatına bağlanmamıştır.

Tam IE9 desteğiyle doğru çözüm, bu tıklama işleyicisi her tetiklendiğinde upload_file öğesinin yerini bulmak için "bul" u kullanmaktır. Yükleme_dosyası için kodunuzu eklemediniz, bu yüzden doğru seçicinin sizin durumunuzda ne olacağını bilmiyorum, ancak şu gibi bir şeye benzeyeceğim:

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