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

Question

我试图让用户上传图像，当图像上传完成时，您可以单击add image按钮，它将作为img src添加到文本框中。尽管它返回的对象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>

​