我一直在四处寻找,但未能找到这是否可能。
这是我希望在提交之前发生的事情:当用户选择要上传的文件时,我想获取图像的数据并将其转换为 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+"' />");
}
最佳答案
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]);
}
上面的代码对我有用。它缺乏验证和所有好的东西,但这对您来说应该是一个很好的起点。
关于javascript - 从输入字段中抓取图像以获取图像数据/显示图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7372637/