Question

HTML：

<input type="file" id="myFile">
<button id="pushKnop" type="button">Push</button>

jQuery的：

if($('#myFile').val() != ""){
        e.preventDefault();
        pushNummer++;
        var push_structure2 = $('<br><div class="push"><a href="profiel.html"><div id="pushPersoon"><img src="img/pf.jpg"/><h1>Martijn Garritsen:</h1></div></a><div class="pushTextStuk pushNummer' + pushNummer + '"><p class="pushNummer"></p></div></div>');
        $('#pushesKader').prepend(push_structure2);
        $('.pushNummer' + pushNummer).append('<img src=" " id="pushFoto'+pushNummer+'"/>');
      }

因此，如果有人选择了一个文件并按下按钮，网站上会出现一个新的div，其中包含<img>标签，但现在我正在寻找获取文件的方法（这将是一个img）他们选择在div中显示，所以要把它放在img标签的src =“”里面。

这是我到目前为止所做的：

$('#myFile').on('change', function(){
      var input = $(this)[0];
      var file = input.files[0];
      var reader = new FileReader();
        reader.readAsDataURL(file);
      reader.onload = function(e){
         $('#pushFoto' + pushNummer).attr('src', e.target.result);
       }
    });

Answer 1

我认为您正在尝试在img标记内使用数据网址。

首先阅读： https://css-tricks.com/data-uris/

但是如果你想使用图片标签：

所以你的代码看起来像是：

reader.onload = function(e){
    $('#pushFoto' + pushNummer).attr('src','data:image/gif;base64,' + e.target.result);
}

Answer 2

您无需添加#myFile的更改事件。你可以像下面这样做。希望这会对你有所帮助。

var pushNummer = 0;
$('#pushKnop').click(function() {
        if ($('#myFile').val() != "") {
            pushNummer++;
            var push_structure2 = $('<br><div class="push"><a href="profiel.html"><div id="pushPersoon"><img src="img/pf.jpg"/><h1>Martijn Garritsen:</h1></div></a><div class="pushTextStuk pushNummer' + pushNummer + '"><p class="pushNummer"></p></div></div>');
            $('#pushesKader').prepend(push_structure2);
            $('.pushNummer' + pushNummer).append('<img src="" id="pushFoto' + pushNummer + '"/>');

            var file = document.getElementById('myFile').files[0];
            var reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = function (e) {
                $('#pushFoto' + pushNummer).attr('src', e.target.result);
            };
        }
});

Answer 3

希望这会起作用

$('#pushKnop').on("click", function(e){
  if($('#pushTextVeld').val() != ""){
    e.preventDefault();
    pushNummer++;
    var push_structure = $('<br><div class="push"><a href="profiel.html"><div id="pushPersoon"><img src="img/pf.jpg"/><h1>Martijn Garritsen:</h1></div></a><div class="pushTextStuk pushNummer' + pushNummer + '"><p class="pushNummer"></p></div></div>');
    $('#pushesKader').prepend(push_structure);
    $('.pushNummer' + pushNummer).append($('#pushTextVeld').val());
    $('#pushTextVeld').val("");
  }

  if($('#myFile').val() != ""){
    e.preventDefault();
    pushNummer++;
    var push_structure2 = $('<br><div class="push"><a href="profiel.html"><div id="pushPersoon"><img src="img/pf.jpg"/><h1>Martijn Garritsen:</h1></div></a><div class="pushTextStuk pushNummer' + pushNummer + '"><p class="pushNummer"></p></div></div>');
    $('#pushesKader').prepend(push_structure2);
    $('.pushNummer' + pushNummer).append('<img src=" " id="pushFoto'+pushNummer+'"/>');

    // Add below code here
    var input = $('#myFile')[0];
    var file = input.files[0];
    var reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function(e){
      $('#pushFoto' + pushNummer).attr('src', e.target.result);
    }
  }
});

//Remove the below Code
/*$('#myFile').on('change', function(){
  var input = $(this)[0];
  var file = input.files[0];
  var reader = new FileReader();
    reader.readAsDataURL(file);
  reader.onload = function(e){
    console.log(pushNummer);
     $('#pushFoto' + pushNummer).attr('src', e.target.result);
   }
 });*/

使用jQuery将img文件加载到img标记中

3 个答案: