問題：如何在'imgDetail'div 中獲取影像名稱、大小、ext 和顯示
更新 - 檔案名列印為名稱：${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>
uj5u.com熱心網友回復：
要在 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="javascript拖放，比顯示影像資訊">`;
};
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>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/340545.html
標籤：javascript 查询 阿贾克斯
上一篇：手風琴不作業找不到任何解決方案