JavaScript拖拽上传图片获取信息展示在imgDetail及模板变量失效问题

问题根因 #

• 模板字符串插值失效：ES6 模板字符串必须使用反引号`包裹才能识别${}插值语法，原代码错误使用单引号包裹插值内容，导致变量无法被替换
• 缺少扩展名逻辑：可通过对文件名按.分割取最后一段的方式获取扩展名，兼容性优于从MIME类型提取

修复修改点 #

1. 补充原代码缺失的图片预览容器#imageHold，避免JS执行报错
2. 将插值字符串的包裹符从单引号替换为反引号，修复插值失效问题
3. 新增扩展名获取逻辑，补充文件名、扩展名的展示内容
4. 补充拖拽离开事件的样式清除逻辑，优化交互体验

完整代码 #

HTML代码 #

<!-- 拖拽区域 -->
<div id="dropZone" style="width: 300px; height: 100px; background-color: #f5f5f5; border: 2px dashed #999; display: flex; align-items: center; justify-content: center;">拖拽图片到此处</div>
<!-- 图片信息展示容器 -->
<div id="imgDetail" style="margin: 12px 0;"></div>
<!-- 图片预览容器 -->
<div id="imageHold" style="display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px;"></div>

JavaScript代码 #

var dropZone = document.getElementById('dropZone');
var detailsDiv = document.querySelector('#imgDetail');
var imageHold = document.querySelector('#imageHold');

// 拖拽经过区域处理
dropZone.addEventListener('dragover', function (e) {
    e.stopPropagation();
    e.preventDefault();
    e.dataTransfer.dropEffect = 'copy';
    dropZone.classList.add("hoverActive");
});

// 拖拽离开区域处理
dropZone.addEventListener('dragleave', function (e) {
    e.stopPropagation();
    e.preventDefault();
    dropZone.classList.remove("hoverActive");
});

// 拖拽释放处理
dropZone.addEventListener('drop', function (e) {
    dropZone.classList.remove("hoverActive");
    e.stopPropagation();
    e.preventDefault();

    var files = e.dataTransfer.files;
    Object.values(files).forEach((file) => {
        // 仅处理图片类型文件
        if (file.type.match(/image.*/)) {
            // 获取小写格式的文件扩展名
            const fileExt = file.name.split('.').pop().toLowerCase();
            var reader = new FileReader();
            reader.onload = function (e2) {
                // 生成预览图
                var img = document.createElement('img');
                img.src = e2.target.result;
                img.width = 100;
                img.height = 100;
                // 渲染所有文件信息到imgDetail容器
                detailsDiv.innerHTML += `
                    <div style="padding: 8px 0; border-bottom: 1px solid #eee;">
                        <p>文件名：${file.name}</p>
                        <p>文件大小：${bytesToSize(file.size)}</p>
                        <p>扩展名：${fileExt}</p>
                    </div>
                `;
                imageHold.appendChild(img);
            };
            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];
}

内容的提问来源于stack exchange，提问作者Dan