Question

我正在上传多张图片并在从输入中选择后显示它们。但我无法使用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。

Answer 1

使用reader.onload而不是reader.onloadend

同时，在你的showImage（source）函数中，你传递的参数是'source'，但你在函数中使用'src'。

Answer 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>");        
         }
});

获取图像路径的问题

2 个答案: