Javascript图像上传和显示

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

为此

1.我用html做了一个select标签，通过它我可以上传图片

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

3.select标记具有onchange javascript事件处理程序，该处理程序调用javascript函数changeimage

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

函数changeimage（）
{
document.form_name.imagetag.src=document.form_name.filetag.value；
}

在上述代码中

表单名称：是我表单的名称

<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位置

---

我使用的是Windows7、wamp服务器和chrome的最新版本。

您可能想签出它（我的代码来源于此）。它涉及到一点jQuery，但如果您真的必须用纯JS编写它，那就来吧

注意：我修改了你的标签以符合下面的JS。同时尽量避免编写任何内联脚本。保持HTML和JS松散耦合总是很好的

var fileTag=document.getElementById（“fileTag”），
预览=document.getElementById（“预览”）；
addEventListener（“change”，function（））{
改变形象（本）；
});
函数更改图像（输入）{
变量读取器；
if（input.files&&input.files[0]）{
reader=newfilereader（）；
reader.onload=函数（e）{
preview.setAttribute（'src'，e.target.result）；
}
reader.readAsDataURL（input.files[0]）；
}
}

---

您还可以使用

Image（）

构造函数。它创建一个新的

HTML图像元素

示例-

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);
});

---

参考-

看看这里：（10秒谷歌顺便说一句）如果我没有错的话，他们使用了jQuery，但我想通过javascript。我发布的页面上有更多的答案。一个甚至是纯JS。可能是