Poussez le chemin d'accès de l'image insérée dynamiquement dans le tableau en javascript

Question

J'essaie de créer un curseur d'image. J'ai un tableau d'objets comme ceci:

var slides = [ 
    { 
     img: 'images/one.jpg', 
     text: 'First Image' 
    }, 
    { 
     img: 'images/two.jpg', 
     text: 'Second Image' 
    } 
]; 

Je dois avoir la fonctionnalité pour ajouter plus d'images dans le curseur d'image. Par conséquent, j'ai besoin d'obtenir le chemin du fichier de l'image que je vais télécharger et pousser ce chemin de fichier dans ce tableau slides.

Je suis passé par this SO réponse, qui enseigne efficacement comment télécharger et afficher une image, mais mes besoins sont différents.

HTML

 <div id="slide-container"> 

     </div> 

     <div id="panel-container"> 
      <form> 
       <label> 
        <span>Image Text</span> 
        <input type="text" class="form-control" id="image-related-text"> 
       </label> 
       <label> 
        <span>Duration</span> 
        <input type="text" class="form-control" id="time-duration"> 
       </label> 
       <div id="d"> 
        <input type="file" id="image-upload"> 
       </div> 

       <button id="add" disabled="true">Add to Container</button> 
      </form> 
     </div> 

JS

var global_image_url = ""; 

// add the image and the relevant text in the slider on click of this button 
$('#add').click(function(){ 

    var imageRelatedText = $('#image-related-text').val(); 
    var timeDuration = $('#time-duration').val(); 

    // a new object to be pushed inside the 'slides' array 
    var temp_obj = { 
     img: 'nothing for now :|', //this should contain the image url 
     text: imageRelatedText 
    }; 
}) 

$('#image-upload').change(function(){ 
    global_image_url = readUrl(this); 
    console.log(global_image_url); 
}); 

// this function gets called when an image file is chosen 
function readUrl(input){ 

    var img = $('<img>'); 
    var local_image_url = ""; // thought I would store the file path in this variable 

    if (input.files && input.files[0]) { 
     var reader = new FileReader(); 

     reader.onload = function (e) { 

      local_image_url = JSON.stringify(e.target.result); 

      img.attr('src', e.target.result); 
      img.attr('height','100%'); 
      img.attr('width','97%'); 
     } 
     reader.readAsDataURL(input.files[0]); 
    } 

    console.log(local_image_url); // chrome developer tools freezes 
    return local_image_url; 
} 

Je pensais que e.target.result donnerait l'URL, mais ce n'est pas le cas. C'est juste un autre objet (imprimé dans la console une fois).

Alors, comment puis-je répondre à mes exigences?

Merci!

Answer 1

oui e.target.result sera l'URL, mais rappelez-vous lecteur FileReader le contenu du fichier comme asynchrone, si vous voulez afficher la valeur, vous devez ajouter un peu de rappel comme:

$('#image-upload').change(function(){ 
    readUrl(this,function(){ 
     console.log(global_image_url); 
    }); 

}); 

// this function gets called when an image file is chosen 
function readUrl(input,callback){ 

    var img = $('<img>'); 
    var local_image_url = ""; // thought I would store the file path in this variable 

    if (input.files && input.files[0]) { 
     var reader = new FileReader(); 

     reader.onload = function (e) { 
      typeof callback == 'function' && callback(e.target.result); 
      local_image_url = JSON.stringify(e.target.result); 

      img.attr('src', e.target.result); 
      img.attr('height','100%'); 
      img.attr('width','97%'); 
     } 
     reader.readAsDataURL(input.files[0]); 
    } 

}