Question

我有一个输入字段，我在其中通过浏览按钮插入值现在我想将该值从输入字段复制到src标记，以便我可以预览用户刚刚上传的图像

这是我的代码

<input class="text-input" type="text" name="logo" id="logo" onclick="tinyBrowserPopUp('image','logo','client_logos');"/>

我想将上面输入字段中的选定值复制到

<img src="myimage" />

Answer 1

您无法直接从用户的计算机上显示它，而是需要先将其上传到您的服务器，然后再显示它。使用ajax上传文件会产生您想要的相同效果。另请查看：FileReader API @ MDN

更新：由于服务器上已有图片，请尝试以下代码

试试这段代码：

<强> HTML：

<input class="text-input" type="text" name="logo" id="logo" onclick="tinyBrowserPopUp('image','logo','client_logos');" />
<img src="myimage" />

<强> JS：

setInterval(react, 5000);
function react() {
    document.getElementByTagName("img").src = document.getElementByName("logo").value;
}

Answer 2

在img标记中添加id并使用

var imagepath = $('#logo').val();
$('#myimg').attr('src', imagepath);

在输入更改时触发的函数内部

Answer 3

我使用下面的代码。我喜欢将函数放在body上，这样即使之后通过AJAX添加了类，“change”命令仍然会触发事件。

我的方法确实使用jQuery。

<强> HTML：

<input class="text-input" class="classhere" type="text" name="logo" id="logo" />
<div class="imagearea"></div>

<强> JS：

$("body").on("change",".classhere",function(){
  //Equivalent of getElementById
  var fileInput = $(this)[0];//returns a HTML DOM object by putting the [0] since it's really an associative array.
  var file = fileInput.files[0]; //there is only '1' file since they are not multiple type.

  var reader = new FileReader();
  reader.onload = function(e) {
       // Create a new image.
       var img = new Image();

       img.src = reader.result;
       $(".imagearea").html(img);
   }

   reader.readAsDataURL(file);//attempts to read the file in question.
});

此方法使用HTML5文件系统API来读取图像并将其放入新的javascript img对象中。这里的关键是readAsDataURL。如果使用chrome检查器，您会注意到图像以base64编码存储。

读者是异步的，这就是它使用回调函数onload的原因。因此，请确保需要图像的任何重要代码都在onLoad中，否则您可能会得到意想不到的结果。

使用jquery从插入到src标记的html输入字段获取值

3 个答案: