使用HTML5 Dropzone时，如何获取拖拽图片的实际尺寸与格式？

没问题，我来帮你实现这个需求——在拖拽图片到指定区域后，既能以300×300的尺寸显示预览，又能在下方展示图片的真实尺寸和格式。下面是完整的解决方案，包含HTML、CSS和JavaScript代码，每一步都有详细说明：

完整代码实现 #

HTML结构 #

<div class="largeartwork" id="dropzone">
  <figure>
    <img id="preview-img" alt="拖拽预览图">
    <figcaption id="image-info">请拖拽图片到此处</figcaption>
  </figure>
</div>

CSS样式 #

.largeartwork {
  width: 300px;
  height: 300px;
  border: 3px dashed #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-bottom: 10px; /* 给说明文字留空间 */
}

.largeartwork.dragover {
  border-color: black; /* 拖拽时的边框反馈 */
}

.largeartwork img {
  max-width: 300px;
  max-height: 300px;
  min-width: 300px;
  min-height: 300px;
  border: 3px solid black;
  object-fit: contain; /* 保持图片比例，避免强制拉伸变形 */
}

figcaption {
  text-align: center;
  font-size: 14px;
}

JavaScript逻辑 #

const dropzone = document.getElementById('dropzone');
const previewImg = document.getElementById('preview-img');
const imageInfo = document.getElementById('image-info');

// 阻止浏览器默认的拖拽行为（比如直接打开图片）
['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
  dropzone.addEventListener(eventName, preventDefaults, false);
});

function preventDefaults(e) {
  e.preventDefault();
  e.stopPropagation();
}

// 拖拽状态的样式切换，提升用户体验
['dragenter', 'dragover'].forEach(eventName => {
  dropzone.addEventListener(eventName, () => dropzone.classList.add('dragover'), false);
});

['dragleave', 'drop'].forEach(eventName => {
  dropzone.addEventListener(eventName, () => dropzone.classList.remove('dragover'), false);
});

// 处理拖拽落下的文件
dropzone.addEventListener('drop', handleDrop, false);

function handleDrop(e) {
  const files = e.dataTransfer.files;
  if (files.length > 0) {
    handleImageFile(files[0]);
  }
}

function handleImageFile(file) {
  // 先校验是否为图片文件
  if (!file.type.startsWith('image/')) {
    imageInfo.textContent = '请拖拽有效的图片文件';
    return;
  }

  // 从文件类型中提取格式（比如image/jpeg → JPEG）
  const imageFormat = file.type.split('/')[1].toUpperCase();

  // 读取图片文件并创建预览
  const reader = new FileReader();
  reader.onload = function(e) {
    // 创建Image对象获取真实尺寸
    const tempImg = new Image();
    tempImg.onload = function() {
      // 获取图片的实际宽高
      const realWidth = this.width;
      const realHeight = this.height;
      // 更新预览图和说明文字
      previewImg.src = e.target.result;
      imageInfo.textContent = `${realWidth}×${realHeight} ${imageFormat}`;
    };
    tempImg.src = e.target.result;
  };
  reader.readAsDataURL(file);
}

关键细节说明 #

• 拖拽交互优化：添加了dragover状态的边框样式变化，让用户清晰知道当前可以放置图片；同时阻止了浏览器默认的拖拽打开行为，确保流程在我们的控制内。
• 真实尺寸获取：通过创建临时的Image对象，在图片加载完成后读取它的width和height属性，这就是图片的原始像素尺寸，不受预览样式的影响。
• 格式提取：从文件对象的type属性中拆分出格式名称，转成大写后展示更符合用户阅读习惯。
• 预览图适配：用object-fit: contain保证图片在300×300的容器内保持原始比例，不会被拉伸变形，同时满足你要求的固定显示尺寸。

这样就能完美实现你需要的功能啦！

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