Javascript图像上传和显示答案

【问题标题】：Javascript image upload and displayJavascript图像上传和显示
【发布时间】：2015-10-21 00:07:36
【问题描述】：

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

为此

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

我使用的是window 7、wamp server和chrome最新版本。

【问题讨论】：

看看这里：stackoverflow.com/a/12369027/3020926（10s of google btw）
如果我没记错的话，他们已经使用了 jQuery，但我想通过 javascript。
我发布的页面上有更多答案。一个甚至是纯 JS。
HTML - Display image after selecting filename的可能重复

标签： javascript php html

【解决方案1】：

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

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

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

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

【讨论】：

【解决方案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

【讨论】：

【解决方案3】：

您需要一个输入标签来上传文件和一个图片标签来在网站上呈现。

HTML 和 Javascript 应该是这样的

const renderFile = () => {
  const render = document.querySelector('img')
  const file = document.querySelector('input[type=file]').files[0]
  const reader = new FileReader();
  
  
  reader.addEventListener('load' , ()=> {
    render.src = reader.result;
  }, false)

  if(file){
    reader.readAsDataURL(file);
  }
}

<input type = 'file' onchange = 'renderFile()' >
<br>
<br>
<img src = "" alt='rendered image' id='rendered-image'  >

每次上传时，网页都会显示上传的图片您可以根据需要设置图片的高宽样式

【讨论】：