javascript拖放，而不是显示图像信息

Question

问题：如何在'imgDetail'div 中获取图像名称、大小、文本和显示

更新-文件名打印为Name:${file.name}，而不是文件名

拖放文件html按钮

<div id="dropZone" style="width: 300px; height: 100px; background-color: red"></div>

显示图像信息

<div id="imgDetail"></div>

拖放脚本

<script>
var dropZone = document.getElementById('dropZone');
var detailsDiv = document.querySelector('#imgDetail');
// Optional.   Show the copy icon when dragging over.  Seems to only work for chrome.
dropZone.addEventListener('dragover', function (e) {
e.stopPropagation();
e.preventDefault();
e.dataTransfer.dropEffect = 'copy';
});
// Get file data on drop
dropZone.addEventListener('drop', function (e) {
document.getElementById('dropZone').classList.remove("hoverActive");
e.stopPropagation();
e.preventDefault();
var files = e.dataTransfer.files; // get all files
Object.values(files).forEach((file) => { //loop though all files
if (file.type.match(/image.*/)) {
var reader = new FileReader();
reader.onload = function (e2) {
var img = document.createElement('img');
img.src = e2.target.result;
img.width = 100;
img.height = 100;
detailsDiv.innerHTML += '<p>Size: ${bytesToSize(file.size)}</p>';
//display image 
var div = document.getElementById('imageHold')
div.appendChild(img);
};
reader.readAsDataURL(file);
}// end of if
});// end of for
});

function bytesToSize(bytes) {
var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
if (bytes == 0) return '0 Byte';
var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
return Math.round(bytes / Math.pow(1024, i), 2) + ' ' + sizes[i];
}
</script>

Answer 1

要在div中显示图像名称或大小，只需使用属性innerHTML和bytesToSize函数来格式化文件大小。

var dropZone = document.getElementById('dropZone');
var details = document.querySelector('#imgDetail');
dropZone.addEventListener('dragover', function(e) {
e.stopPropagation();
e.preventDefault();
e.dataTransfer.dropEffect = 'copy';
});
dropZone.addEventListener('drop', (e) => {
e.stopPropagation();
e.preventDefault();
details.innerHTML = '';
var files = e.dataTransfer.files;
Object.values(files).forEach((file) => {
var reader = new FileReader();
reader.onloadend = () => {
details.innerHTML += `
<p>Name: ${file.name}<p>
<p>Size: ${bytesToSize(file.size)}</p>
<img src="${reader.result}" alt="${file.name}">`;
};
reader.readAsDataURL(file);
});
});
function bytesToSize(bytes) {
var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
if (bytes == 0) return '0 Byte';
var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
return Math.round(bytes / Math.pow(1024, i), 2) + ' ' + sizes[i];
}

img {
width: 200px;
height: 100px;
object-fit: cover;
}

<div id="dropZone" style="width: 300px; height: 100px; background-color: red"></div>
<div id="imgDetail"></div>