获取图片路径的问题答案

【问题标题】：Issue in getting path of images获取图片路径的问题
【发布时间】：2014-03-13 08:26:24
【问题描述】：

我正在上传多张图片并在从输入中选择后显示它们。但我无法使用FileReader 获取图像路径。

HTML

<div class="col-md-4">
              <input id="images" name="images" placeholder="" class="form-control input-md" type="file" accept="image/*"  multiple>
            </div>
 <div class="col-md-2">
               <input type="button" id="btn" name="btn" class="btn btn-primary" value="upload">
            </div>

JQuery

$('#btn').click(function(){

      var images = $('#images')[0].files;
      var reader, file , i=0 , len=images.length;

     for ( ; i < len; i++ ) {

         if(window.FileReader){
          var file = $('#images').files[i];
          reader = new FileReader();
          reader.onloadend = function (e) { 
                        alert(e.target.result);
                        showimage(e.target.result);
                    };
                    reader.readAsDataURL(file);       
           console.log();
         }
        }
     function showimage(source){

                    $('#img').append("<div class='col-sm-2'><img src="+src+" class='thumbnail hw'></img></div>");        
         }
});

我无法提醒 e.target.result。

【问题讨论】：

stackoverflow.com/questions/18493869/…

标签： php jquery filereader

【解决方案1】：

使用 reader.onload 代替 reader.onloadend

同时，在您的 showImage(source) 函数中，您传递的参数是“source”，但您在函数中使用了“src”。

【讨论】：

但它不会提醒路径。

【解决方案2】：

$('#btn').click(function(){

      var images = $('#images')[0].files,
             input=$('#images').get(0) ; /*  need to add this  */
      var reader, file , i=0 , len=images.length;

     for ( ; i < len; i++ ) {

         if(window.FileReader){
          var file = input.files[i];
          reader = new FileReader();
          reader.onloadend = function (e) { 
                        alert(e.target.result);
                        showimage(e.target.result);
                    };
                    reader.readAsDataURL(file);       
           console.log();
         }
        }
     function showimage(source){

                    $('#img').append("<div class='col-sm-2'><img src="+source+" class='thumbnail hw'></img></div>");        
         }
});

【讨论】：