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

以下是一个简化的HTML和JavaScript代码示例，用于实现一个支持拖拽上传图片和预览的功能。这个示例不包括完整的错误处理和兼容性检测，但提供了核心功能。

HTML:




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Drag and Drop Image Upload</title>
<style>
    #drop_area {
        width: 300px;
        height: 200px;
        border: 2px dashed #aaa;
        margin-bottom: 20px;
        text-align: center;
        line-height: 200px;
        font-size: 24px;
    }
    .preview {
        width: 100px;
        height: 100px;
        margin: 10px;
        float: left;
        overflow: hidden;
    }
    .preview img {
        width: 100%;
        height: auto;
    }
</style>
</head>
<body>
 
<div id="drop_area">Drag images here</div>
 
<script>
// JavaScript 代码
document.getElementById('drop_area').addEventListener('drop', handleDrop, false);
 
function handleDrop(evt) {
    evt.stopPropagation();
    evt.preventDefault();
 
    var files = evt.dataTransfer.files; // 获取拖拽进来的文件对象列表
    // 处理文件，这里只是简单地在控制台输出文件名
    for (var i = 0, f; f = files[i]; i++) {
        if (!f.type.match('image.*')) {
            continue; // 不是图片则跳过
        }
 
        var reader = new FileReader();
 
        reader.onload = (function(theFile) {
            return function(e) {
                // 创建图片预览
                var img = document.createElement('img');
                img.src = e.target.result;
                img.className = 'preview';
                document.body.appendChild(img);
            };
        })(f);
 
        reader.readAsDataURL(f); // 读取文件内容
    }
}
 
// 允许拖拽
document.getElementById('drop_area').addEventListener('dragover', function(evt) {
    evt.stopPropagation();
    evt.preventDefault();
    evt.dataTransfer.dropEffect = 'copy';
}, false);
</script>
 
</body>
</html>

这段代码实现了基本的拖拽上传图片的功能，并在用户拖拽图片到指定区域时，创建图片的预览。它使用了HTML5的Drag and Drop API以及FileReader API来读取文件内容并显示为图片。这个例子不包括任何的错误处理，如检查浏览器是否支持所需的API或处理文件上传的逻辑。

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

评论已关闭

推荐阅读