<input type="file"> 不适用于 document.value()；

Question

我正在尝试让用户上传图片，图片上传完成后，您可以单击添加图片按钮，它将作为 img src 添加到文本框中。虽然，它返回 [object HTMLInputElement] 类似于 null，为什么会这样？

function added() {
   var image = document.getElementById('fileToUpload');
   document.getElementById('media_post').value = '<img src="http://lit.life/gallry/<?php echo $dir_auth1; ?>/uploads/">' + image;
 }

 <form action="upload1.php" method="post" id="addedImage" enctype="multipart/form-data" data-ajax="false">
Select image to upload:
<input type="file" name="fileToUpload" id="fileToUpload">
<input type="submit" value="Upload Image" name="submit">

 <textarea rows="4" cols="45" id="media_post" name="media_post" form="usr_post" maxlength="300" method="get">

</textarea>

Answer 1

您正在尝试显示 <input> 元素，而不是它的值。

   var image = document.getElementById('fileToUpload').value;

如果您希望此文件名成为图像的一部分 URL，您需要将其放在 src 属性中。

document.getElementById('media_post').value = '<img src="http://lit.life/gallry/<?php echo $dir_auth1; ?>/uploads/' + image + '">' ;

function added() {
  var image = document.getElementById('fileToUpload').value;
  document.getElementById('media_post').value = '<img src="http://lit.life/gallry/aidan/uploads/' + image + '">' ;
}

Select image to upload:
<input type="file" name="fileToUpload" id="fileToUpload" onchange="added()">
<input type="submit" value="Upload Image" name="submit">

<br>Preview
<br>
<textarea rows="4" cols="45" id="media_post" name="media_post" form="usr_post" maxlength="300" method="get">

</textarea>

<input type="file"> 不适用于 document.value()；

<input type="file"> is not working with document.value();

html

php

upload

input