嘿，这两个问题我刚好有经验，咱们拆解开来聊：

1. 旧版HTML/JavaScript（非HTML5）是否支持图片拖拽？ #

旧版的HTML和JS没有原生的拖拽API支撑，要实现类似效果只能靠手动监听鼠标的mousedown、mousemove、mouseup事件，自己追踪元素位置和状态——这种方式不仅写起来繁琐到爆炸，兼容性还极差，尤其是处理跨网站的图片拖拽时，几乎没法稳定运行。所以旧版技术栈基本不支持靠谱的图片拖拽功能，别费那劲了。

2. HTML5/JavaScript是否支持跨站图片拖拽+纯客户端处理+上传？ #

完全可以！HTML5引入的原生Drag & Drop API配合File API，完美覆盖你要的所有需求：纯客户端接收拖拽、预览，再通过AJAX把图片上传到服务器。

实现思路&示例代码 #

下面给你一个极简的可运行示例，核心功能都包含了：

HTML结构

<!-- 拖拽接收区 -->
<div id="dropArea" style="width: 300px; height: 300px; border: 2px dashed #ccc; text-align: center; line-height: 300px; margin: 20px 0;">
  拖拽图片到这里
</div>
<!-- 图片预览区 -->
<div id="preview" style="margin-bottom: 20px;"></div>
<!-- 上传按钮（默认隐藏，有图片后显示） -->
<button id="uploadBtn" style="display: none; padding: 8px 16px; background: #2196F3; color: white; border: none; border-radius: 4px;">
  上传图片到服务器
</button>

JavaScript逻辑

const dropArea = document.getElementById('dropArea');
const preview = document.getElementById('preview');
const uploadBtn = document.getElementById('uploadBtn');
let targetFile = null;

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

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

// 拖拽进入/悬停时给区域加视觉提示
['dragenter', 'dragover'].forEach(eventName => {
  dropArea.addEventListener(eventName, () => {
    dropArea.style.borderColor = '#2196F3';
    dropArea.style.backgroundColor = '#e3f2fd';
  }, false);
});

// 拖拽离开/放下后恢复样式
['dragleave', 'drop'].forEach(eventName => {
  dropArea.addEventListener(eventName, () => {
    dropArea.style.borderColor = '#ccc';
    dropArea.style.backgroundColor = 'transparent';
  }, false);
});

// 处理拖拽放下事件
dropArea.addEventListener('drop', handleDrop, false);

function handleDrop(e) {
  const dataTransfer = e.dataTransfer;
  // 优先处理本地文件或直接拖拽的文件对象
  const files = dataTransfer.files;

  if (files.length > 0) {
    processFile(files[0]);
  } else {
    // 处理从其他网站拖拽过来的图片（以URL形式存在）
    const imageUrl = dataTransfer.getData('text/uri-list');
    if (imageUrl) {
      // 把远程图片转成Blob对象，方便后续上传
      fetch(imageUrl)
        .then(res => res.blob())
        .then(blob => {
          const file = new File([blob], 'cross-site-image.jpg', { type: blob.type });
          processFile(file);
        })
        .catch(err => console.error('获取跨站图片失败:', err));
    }
  }
}

// 处理文件，生成预览
function processFile(file) {
  targetFile = file;
  const reader = new FileReader();
  reader.onload = function(e) {
    preview.innerHTML = `<img src="${e.target.result}" style="max-width: 300px; max-height: 300px;">`;
    uploadBtn.style.display = 'block';
  }
  reader.readAsDataURL(file);
}

// 上传图片到服务器
uploadBtn.addEventListener('click', () => {
  if (!targetFile) return;

  const formData = new FormData();
  formData.append('image', targetFile);

  // 用fetch发送POST请求到你的服务器上传接口
  fetch('/your-upload-endpoint', {
    method: 'POST',
    body: formData
  })
  .then(res => res.json())
  .then(data => {
    console.log('上传成功:', data);
    alert('图片上传完成！');
  })
  .catch(err => console.error('上传失败:', err));
});

几个关键注意点 #

• 跨站拖拽限制：部分网站会设置CORS规则，导致你无法直接fetch他们的图片，这时候可能需要服务器端做代理中转，但用户主动拖拽的场景下，大部分浏览器会允许读取资源。
• 兼容性：现代浏览器（Chrome、Firefox、Edge等）都完美支持这套API，IE10及以上也能基本兼容，IE9及以下就别考虑了。
• 纯客户端特性：除了最后的上传步骤，前面的拖拽接收、图片预览都是纯客户端完成的，完全不需要和服务器交互。

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