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

发布于 2024-12-03 22:31:33 字数 514 浏览 1 评论 0原文

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

这就是我希望在提交之前发生的情况：当用户选择要上传的文件时，我想抓取图像的数据并将其转换为 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+"' />");
}

原文

I've been looking around and haven't been able to find whether this is possible or not.

This is what I would like to happen before submitted: When a user selects a file to be uploaded, I want to grab the image's data and convert it to base64. After it's been converted, I would like to either directly display it in a div or have it sent to the server via AJAX, then displayed in the div.

Below is basically what I'm looking for:

// 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+"' />");
}

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

无语# 2024-12-10 22:31:33

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

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

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

The code above works for me. It lacks verification and all that good stuff, but this should be a good starting point for you.

回复收藏 0 原文

~没有更多了~