Question

我的基本任务是选择图像并显示它，而不将其保存在数据库中。

对于此

1.我在html中创建了一个select标签，通过它我可以上传图像。

2.我制作了一个空白图像标签，其中没有图像源，替代是上传图像。

3.select标签有onchange javascript事件处理程序，它调用javascript函数changeimage。

<script>
       function changeimage()
       {
            document.form_name.imagetag.src=document.form_name.filetag.value;
       }
</script>

在上面的代码中

form_name：是我的表单的名称

<form name = "form_name">

imagetag：是我的Img标签的名称

<Img src=" " name = "imagetag">

filetag：是我的名字

<input type="file" name = "filetag" onchange="changeimage()">

我使用php扩展名保存文件。当我尝试打印filetag的值时，显示“C：\ fakepath \ image.png”，显示所有图像的这个地址。我已将我的php文件保存在www位置。

我使用的是Windows 7，wamp服务器和chrome最新版本。

Answer 1

您可能想要查看此solution（我的代码派生自的地方）。它涉及一些jQuery，但如果你真的必须用纯JS写出来，你就去吧。

注意：我修改了您的代码以符合下面的JS。另外，请尽量避免编写任何内联脚本。始终保持HTML和JS松散耦合。

＆＃13;

var fileTag = document.getElementById("filetag"),
    preview = document.getElementById("preview");
    
fileTag.addEventListener("change", function() {
  changeImage(this);
});

function changeImage(input) {
  var reader;

  if (input.files && input.files[0]) {
    reader = new FileReader();

    reader.onload = function(e) {
      preview.setAttribute('src', e.target.result);
    }

    reader.readAsDataURL(input.files[0]);
  }
}

＆＃13;

<input type="file" id="filetag">
<img src="" id="preview">

＆＃13;

Answer 2

您还可以使用Image()构造函数。它将创建一个新的HTML Image Element。

示例-

document.getElementById("filetag").addEventListener("change", function(e) {

  let newImg = new Image(width, height);

  // Equivalent to above -> let newImg = document.createElement("img");

  newImg.src = e.target.files[0];
  newImg.src = URL.createObjectURL(e.target.files[0]);

  output.appendChild(newImg);
});

参考-https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/Image

Javascript图片上传和显示

2 个答案: