HTML5 CSS3 经典案例：无插件拖拽上传图片 （支持预览与批量）

以下是实现HTML5和CSS3拖拽上传图片功能的核心JavaScript代码，它支持图片预览和批量上传。

// 初始化文件输入框
document.getElementById('file-input').addEventListener('change', function(e) {
    var files = this.files;
    for (var i=0; i<files.length; i++) {
        var file = files[i];
        // 检查文件类型
        if (!file.type.match('image.*')) {
            continue;
        }
        // 创建图片预览
        var img = document.createElement('img');
        img.classList.add('preview');
        img.file = file;
        // 添加拖拽效果
        img.addEventListener('dragstart', dragStart, false);
        img.addEventListener('dragend', dragEnd, false);
        // 添加图片到预览区域
        document.getElementById('preview').appendChild(img);
        // 读取文件并显示
        var reader = new FileReader();
        reader.onload = (function(aImg) {
            return function(e) {
                aImg.src = e.target.result;
            };
        })(img);
        reader.readAsDataURL(file);
    }
});
 
// 拖拽开始事件
function dragStart(e) {
    this.style.opacity = '0.5';
    e.dataTransfer.effectAllowed = 'move';
    e.dataTransfer.setData('text/html', null);
    e.dataTransfer.setImageData(this.src, 0, 0);
    e.dataTransfer.setData('img-file', this.file);
}
 
// 拖拽结束事件
function dragEnd(e) {
    this.style.opacity = '1';
}
 
// 拖拽进入目标区事件
function dragEnter(e) {
    e.stopPropagation();
    e.preventDefault();
}
 
// 拖拽覆盖目标区事件
function dragOver(e) {
    e.stopPropagation();
    e.preventDefault();
}
 
// 拖拽放置事件
function drop(e) {
    e.stopPropagation();
    e.preventDefault();
 
    var img = document.createElement('img');
    img.classList.add('preview');
    img.file = e.dataTransfer.getData('img-file');
    img.addEventListener('dragstart', dragStart, false);
    img.addEventListener('dragend', dragEnd, false);
 
    document.getElementById('preview').appendChild(img);
    var reader = new FileReader();
    reader.onload = (function(aImg) {
        return function(e) {
            aImg.src = e.target.result;
        };
    })(img);
    reader.readAsDataURL(img.file);
}
 
// 设置拖拽事件监听
document.getElementById('preview').addEventListener('dragenter', dragEnter, false);
document.getElementById('preview').addEventListener('dragover', dragOver, false);
document.getEleme