javascript drop and drag, than display image information-CodePudding

issue: How can I get image name, size, ext and display in 'imgDetail' div

update - filename is print as Name: ${file.name} rather than file name

drag and drop file html button

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

display image information

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

drag and drop script

<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>

CodePudding user response：

To display the image name or size in a div just use the property innerHTML and bytesToSize function to format the file size.

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>