javascript - Javascript - 如何从输入 type="file" 获取实际文件
问题描述
我正在尝试上传一个文件并将该文件转换为它的 data-uri 副本,而不需要任何类型的后端,但我一直在试图弄清楚如何实际获取上传的文件。
document.getElementById("myInput").files[0]
允许我访问一些信息,但不能访问实际文件。有文件 api,但我找不到太多关于如何使用它的文档,只是它存在。
有没有办法完全在浏览器中做到这一点?
解决方案
这是多文件输入的代码。您可以通过删除循环来为单个文件执行此操作。这将在您选择文件后立即获取文件并显示在所选img
标签内
HTML 代码
<div>
<img id="img-1" src="#" />
</div>
<div>
<img id="img-2" src="#"/>
</div>
Javascript代码
function readURL(input) {
if (input.files && input.files[0]) {
var countFiles = input.files.length;
for (var i = 0; i < countFiles; i++) {
// console.log(input.files);
if(i === 0) {
// console.log(input.files);
var reader = new FileReader();
reader.onload = function (e) {
// console.log(e);
$('#img-1')
.attr('src', e.target.result)
.width(135)
.height(135);
};
reader.readAsDataURL(input.files[i]);
}else if(i === 1) {
var reader = new FileReader();
reader.onload = function (e) {
// console.log(e);
$('#img-2')
.attr('src', e.target.result)
.width(135)
.height(135);
};
reader.readAsDataURL(input.files[i]);
}
}
}
}
推荐阅读
- css - 用 img 覆盖按钮的整个高度
- python - 在 python 中绘制大型数据集时显示隐藏峰值的图
- python - python import - 从父目录导入 .json 文件
- python - 如何将字母数字字符串转换为时间格式?
- r - RVAideMemoire::chisq.multcomp(x, p.method = "fdr")
- arrays - numpy 二维数组在其中找到精确的二维数组
- pandas - Pandas:混合使用字符串和空值进行过滤
- python - Gcloud SDK 问题
- mysql - mySQL 不会在 XAMPP 中启动
- reactjs - 如何在包含表格的反应中生成希伯来语 PDF?