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

在jquery ready函数

之外使用readURL（）函数

Answer 2

无法从click事件访问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/

如何阅读我的图片网址？

2 个答案: