Question

在我的页面使用html我有一个文本框和一个提交按钮。我希望能够将图像URL放入文本框，单击“提交”，并将图像显示在“提交”按钮下方。我不想将图片上传为文件。我四处寻找如何做到这一点，但没有运气。有什么想法吗？

<form>
        <input type="text" name="imglink" value="insert image URL here" onclick="this.select()"><br>
        <input type="submit" value="Load Image">
</form>

Answer 1

这样的内容允许您输入网址并在提交按钮下上传。确保您有可用的jquery工作。

https://jsfiddle.net/7L031bfj/

<强> HTML

<form>
  <input type="text" id="input">
  <button type="button" id="submit">Submit</button>
</form>

<div id="photo"></div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

<强> JS

$('#submit').click(function(){
  var photo = $('#input').val();
  $('#photo').append('<img src=' + photo + '>')
});

Answer 2

这是另一个使用纯Javascript的例子。而不是＆＃34;提交＆＃34;我使用＆＃34;按钮＆＃34;不提交表格。

<form action="#" method="post">
  <input type="url" name="imglink" id="imglink"  placeholder="Insert image URL here" /><br>
  <input type="button" value="Show Image" id="btn1" />
</form>
<div id="photo"></div>
<script>
document.getElementById('btn1').addEventListener('click', function(){
  document.getElementById('photo').innerHTML = '<img src="'+ document.getElementById('imglink').value +'" alt="Image" />';
});
</script>

Answer 3

您可以使用此属性<input type="file">。

，而不是使用文本框

Answer 4

这是你想要的，因为我也有点不清楚你想要什么

https://jsfiddle.net/q65rxcbg/

<input type="text" id='imglink' value="insert image URL here">
<br>
<input type="submit" id='submit' value="Load Image">
<br/>
<img id='photo'>

$('#submit').click(function () {
    var selectedFile = $('#imglink').val();
    $('#photo').attr("src", selectedFile);
});

在文本框中使用图片网址提交后显示图片

4 个答案: