Question

我一直在四处寻找并且无法找到这是否可能。

这是我想在提交之前发生的事情：当用户选择要上传的文件时，我想获取图像的数据并将其转换为base64。在转换之后，我想直接在div中显示它，或者通过AJAX将其发送到服务器，然后显示在div。

以下基本上是我要找的：

// index.php
<input type="file" name="img" id="img" onChange="displayImg(this)">

// displayImg.js
function displayImg(img) {
   imgData = img.?;  // How do I do this?
   img64 =           // I know how to do this.
   document.write("<img src='data:image/jpeg;base64,"+img64+"' />");
}

Answer 1

function displayImage(evt){
  var files = evt.target.files;
  var reader = new FileReader();

  reader.onload = function(frEvent) {
      document.getElementById("renderImage").innerHTML = '<img src="'+frEvent.target.result+'" />';
  }
  reader.readAsDataURL(files[0]);
}

上面的代码对我有用。它缺乏验证和所有好东西，但这应该是一个很好的起点。

从输入字段抓取图像以获取图像数据/显示图像

1 个答案: