如何閱讀我的圖片的網址？

Question

我想設置src來動態地在我的腳本中添加圖像，用戶首先瀏覽他的圖像，並在文本字段中輸入他的名字，然後點擊添加按鈕，然後動態添加一個表格行。

因爲我想顯示圖像。我的腳本中是否有錯誤？

$(document).ready(function() { 
 
    $('#addbtn').click(function() { 
 
    var val = $.trim($('#txt-val').val()); 
 
    var some = $('#imagefile').val(); 
 
    if (val != '') { 
 
     //$('#imagepath').attr('src','+some+'); 
 

 
     $("imagefile").change(function() { 
 
     readURL('#imagefile'); 
 
     }); 
 

 

 
     $('#newval').append('<option>' + val + '</option>'); 
 
     $('#list-tbl').append('<tr height=\"50\">' + '<td>' + val + '<img id=\"imagepath\" src="#" style="width:50px; height:50px;"/>' + '</td>' + '<td>' + val + '</td>' + '</tr>'); 
 

 
    } 
 
    $('#txt-val').val(''); 
 

 
    }); 
 

 
    function readURL(input) { 
 
    if (input.files && input.files[0]) { 
 
     var reader = new FileReader(); 
 
     reader.onload = function(e) { 
 
     $('#imagepath') 
 
      .attr('src', e.target.result) 
 
      .width(150) 
 
      .height(200); 
 
     }; 
 
     reader.readAsDataURL(input.files[0]); 
 
    } 
 
    } 
 
});

.dynamictbl { 
 
    width: 100%; 
 
    height: auto; 
 
} 
 
table, 
 
tr, 
 
td { 
 
    border: 1px solid #dddddd; 
 
    border-collapse: collapse; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="file" id="imagefile" onchange="readURL(this);" /> 
 
<input type="text" style="width:150px;" id="txt-val" /> 
 
<button id="addbtn">Add</button> 
 
<select id="newval" style="width:150px;"></select> 
 
<div style="width:100%; height:300px; margin-top:5px; overflow:auto;"> 
 
    <table id="list-tbl" class="dynamictbl"> 
 
    <tr height="50"> 
 
     <th width="50%">Index Of Entry<span id="img"></span> 
 
     </th> 
 
     <th width="50%">User Name</th> 
 
    </tr> 
 
    </table> 
 
</div>

Answer 1

採取readURL（）函數jQuery的準備功能

Answer 2

readURL功能不是從點擊事件訪問之外，所以使得它應該被移到了訪問。 還應在將元素添加到DOM而不是onChange事件後調用readURL（）。

window.readURL = function(id) { 
    var input = $('#imagefile')[0]; 
    if (input.files && input.files[0]) { 
    var reader = new FileReader(); 
    reader.onload = function(e) { 

    $('#'+id) 
     .attr('src', e.target.result) 
     .width(150) 
     .height(200); 
    }; 
    reader.readAsDataURL(input.files[0]); 
    } 
}; 

$(document).ready(function() { 
    var rows = 0; 
    $('#addbtn').click(function() { 
    var val = $.trim($('#txt-val').val()); 
    var some = $('#imagefile').val(); 
    if (val != '') { 

    var id = 'imagepath' + (++rows); 

    $('#newval').append('<option>' + val + '</option>'); 
    $('#list-tbl').append('<tr height=\"50\">' + '<td>' + val + '<img id=\"' + id + '\" src="#" style="width:50px; height:50px;"/>' + '</td>' + '<td>' + val + '</td>' + '</tr>'); 
    readURL(id); 

    } 
    $('#txt-val').val(''); 
    }); 

}); 

工作樣本： https://jsfiddle.net/4gyq1kvb/14/