1

Eu gostaria de inserir uma tag usando append mas sempre que eu tento, ele tenta inserir uma imagem na div que eu desejo inserir apenas o texto, existe forma de conseguir?

<input type="file" multiple id="file-input" />
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<div id="id">

</div>
<script>
$("#file-input").change(function(){
  $("#id").empty();
  var names = [];
  for (var i = 0; i < $(this).get(0).files.length; ++i) {
    var thisfile = $(this).get(0).files[i].name;
    $("#id").append("<img src='images/images/eventos/"+thisfile+"' /><br/>");
  }
})

</script>
7
  • O que queres dizer com "inserir uma tag"? Não é uma imagem que queres?
    – Sergio
    Commented 12/09/2017 às 20:22
  • @Sergio Quero escrever o codigo da tag de forma a aparecer por exemplo, <img src='images/images/eventos/1.jpg' /> Commented 12/09/2017 às 20:26
  • Ainda não percebi o que queres dizer com "código da tag"... Queres inserir HTML sem que seja interpretado, é isso? para fica o HTML à vista do utilizador?
    – Sergio
    Commented 12/09/2017 às 20:28
  • @Sergio Exatamente, existe forma de conseguir isso? Já usei .html() mas não funcionou. Commented 12/09/2017 às 20:29
  • Ok, então deves usar .text() em vez de .html(). Testa e diz se é isso que querias.
    – Sergio
    Commented 12/09/2017 às 20:33

4 Respostas 4

3

Uma solução bem simples, alterando apenas um caractere do seu código, seria substituir o sinal que abre a tag <img> "<" (menor que) por "&lt;". Desta forma o navegador irá tratar a tag como uma string:

$("#file-input").change(function(){
  $("#id").empty();
  var names = [];
  for (var i = 0; i < $(this).get(0).files.length; ++i) {
    var thisfile = $(this).get(0).files[i].name;
    $("#id").append("&lt;img src='images/images/eventos/"+thisfile+"' /><br/>");
  }
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" multiple id="file-input" />
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<div id="id">

</div>

0

Deves usar o .text() do jQuery assim:

var files = ['la-la-la', 'le-le-le', 'li-li-li'];
// no teu caso podes usar 
// var files = $(this).get(0).files;

var text = files.map(file => "<img src='images/images/eventos/" + file + "' />").join("\n");
$("#id").text(text);

// e para criar quebra de linhas
$("#id").html($("#id").html().replace(/\n/g, '<br>'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="id"></div>

0

acho que o que voce quer é isso. Ou pelo menos foi o que entendi, me corrija caso esteja errado.

$('button').on('click', function(){
   var imagem = $('#imag').val();
   $('body').text('<img src="'+imagem+'">')
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="imag" placeholder="CAMINHO DA IMAGEM">
<button>inserir</button>

ATUALIZADO

$('input').change(function(){
  var names = [];

  for (var i = 0; i < $(this).get(0).files.length; ++i) {
    var thisfile = $(this).get(0).files[i].name;
    $("#id").append(document.createTextNode("<img src='images/images/eventos/"+thisfile+"' /><br/>"));
  }
})
<input type="file" multiple>
  <div id="id"></div>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  

6
  • Não é bem isso, eu queria selecionar as imagens com um input, e quando selecionasse, apresentasse não só o nome, mas <img src="nome_da_imagem.jpg" /> Commented 12/09/2017 às 20:32
  • Acredito que eé so usar o text Commented 12/09/2017 às 20:33
  • @BrunoMoutinho Editei o codigo a cima, basta executar e ver se é isso mesmo Commented 12/09/2017 às 20:35
  • O problema é que isso não funciona num <input type="file" multiple> como eu queria, apenas apresenta o ultimo Commented 12/09/2017 às 20:36
  • Basta jogar em um for, me da um minuto, vou editar o codigo Commented 12/09/2017 às 20:37
0

Como você está adicionando uma tag passando seu respectivo src então ele irá carregar a imagem, seria melhor você dar um apend utilizando a tag p e o texto sendo o caminho da imagem conforme você quer.

<input type="file" multiple id="file-input" />
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<div id="id">

</div>
<script>
$("#file-input").change(function(){
  $("#id").empty();
  var names = [];
  for (var i = 0; i < $(this).get(0).files.length; ++i) {
    var thisfile = $(this).get(0).files[i].name;
    $("#id").append("&lt;img src='images/images/eventos/"+thisfile+"'/>");
  }
})

</script>
4
  • Mas eu quereria também adicionar <img> e não só o src Commented 12/09/2017 às 20:35
  • entendi, basta colocar no inicio da tag no lugar de '<' o valor &lt; ficando o apende da seguinte forma: $("#id").append(" &lt;img src=images/images/eventos/"+thisfile+"/>"); Commented 12/09/2017 às 20:47
  • Mas se inserir na base de dados, irá inserir como < ou como &lt; ? Commented 13/09/2017 às 14:25
  • Dessa forma irá inserir &lt; porque quando você buscar da base de dados para renderizar ele irá escrever a string da tag. Commented 13/09/2017 às 16:15

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .