将动态插入图像的文件路径插入到javascript中的数组中

Question

我试图制作图像滑块。我有这样的对象阵列：

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

我需要具有功能来添加更多的图像到图像滑块。因此，我需要获取将要上传的图像的文件路径，并将该文件路径推送到此slides阵列中。

我已经通过this SO回答，它有效地教导如何上传和显示图像，但我的需求是不同的。

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; 
} 

我想e.target.result会给URL，但事实并非如此。这只是另一个对象（在控制台中打印一次）。

那么我如何达到我的要求呢？

谢谢！

Answer 1

是e.target.result会将该网址，但要记住的FileReader读者文件内容为异步的，如果你想输出的值，你需要添加一些回调，如：

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

}