Mise en cache des éléments dom en chrome

Question

J'ai créé un module de chargement de contenu. il est essentiellement fait par fichier api.

le code html est

<input type="file" id="filepicker-input" multiple="true" style="display:none;"/> 
    <div class="addfile_btndiv" id="addfile_btndiv"> 
    <span id="direct-upload-text"><input name="" class="add_filebtn" type="button" value="Add Files" /></span> 
    </div> 
    <div id="dropped-files"> 

    </div> 

    <div class="clear"></div> 
    </div> 

l'opération est eu lieu lorsque onchange le fichier. le code js est

var fileInput = document.getElementById("filepicker-input"); 
document.getElementById("direct-upload-text").onclick = function(e){ 
    fileInput.click(); 
} 
fileInput.onchange = function(e) { 

//basically same as in ondrop 
    $("#dropped-files").html(""); 

    var files = e.target.files; 

    var type   = 'zip'; 
    var location_block = 1; 
    var check = createPreviewElements(files, type, location_block); 

    if(check){ 

     //add an onclick property to the upload button, this will trigger the main upload process 
     var uploadButton = document.getElementById('upload_button_zip_1'); 

     uploadButton.onclick = function(e){ 
      var block = document.getElementById("current_block"); 
      block.value = location_block; 
      uploadButton.onclick = null; //disable the onclick event once it happened 
      document.getElementById('loading_wrapper').style.display = 'inline'; 
      setTimeout(function(){$('#loading_wrapper').fadeOut()}, 6000); //fade out loader after 2 sec 
      startupload(files, type, location_block); 
     }; 
    } 


} 

le téléchargement fonctionne parfaitement. mon problème est qu'il y a un bouton d'annulation présent pour ce téléchargement. J'ai géré ceci par du code javascript mais après quand l'utilisateur peut resélectionner le même fichier, 'onchange' ne se déclenchera pas. donc j'ajoute une nouvelle logique dans le bouton d'annulation qui supprime le type d'entrée actuel et place un nouveau type d'entrée. le code est

  $('#filepicker-input').attr("id", "newID"); 
    var foo  = document.getElementById("blk_switchbox1"); 
    var olddiv = document.getElementById("newID"); 
    foo.removeChild(olddiv); 
    var element = document.createElement("input"); 

    element.setAttribute("type", "file"); 
    element.setAttribute("id", "filepicker-input"); 
    element.setAttribute("class", "nodisplay"); 


    foo.appendChild(element); 

ce beau travail dans mozila. mais pas en chrome. en chrome, il y a des encaissements pour les éléments dom. aidez-moi s'il vous plaît

Answer 1

Avez-vous essayé de déclencher l'événement de changement manuellement? Plutôt que son événement click?

document.getElementById("direct-upload-text").onclick = function(e){ 
    if(fileInput.value != '') { 
     fileInput.change(); 
    } else { 
     fileInput.click(); 
    } 
}