js、jquery、Bootstrap实现拖拽上传文件

要使用JavaScript、jQuery和Bootstrap实现拖拽上传文件，你可以使用HTML5的拖放API来实现拖拽功能，并结合FormData对象上传文件。以下是一个简单的实现示例：

HTML部分：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Drag and Drop File Upload</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
    <div class="container mt-5">
        <div class="alert alert-success d-none" role="alert">
            File uploaded successfully!
        </div>
 
        <div class="drag-drop-area p-5 mb-4 border rounded" ondrop="drop(event)" ondragover="allowDrop(event)" ondragenter="dragEnter(event)" ondragleave="dragLeave(event)">
            Drop files here...
        </div>
 
        <button class="btn btn-primary" onclick="uploadFiles()">Upload</button>
    </div>
 
    <script>
        // 允许拖放
        function allowDrop(ev) {
            ev.preventDefault();
        }
 
        // 拖动进入
        function dragEnter(ev) {
            $(ev.target).addClass('bg-primary text-white');
        }
 
        // 拖动离开
        function dragLeave(ev) {
            $(ev.target).removeClass('bg-primary text-white');
        }
 
        // 拖放
        function drop(ev) {
            ev.preventDefault();
            $(ev.target).removeClass('bg-primary text-white');
 
            var files = ev.dataTransfer.files; // 获取拖放的文件
            // 处理文件
            // ...
        }
 
        // 上传文件
        function uploadFiles() {
            var formData = new FormData();
            var files = $('.drag-drop-area').data('files'); // 获取拖放的文件
 
            for (var i = 0; i < files.length; i++) {
                formData.append('files[]', files[i]);
            }
 
            $.ajax({
                url: 'your_upload_script_endpoint.php', // 替换为你的上传脚本地址
                type: 'POST',
                data: formData,
                processData: false,  // 告诉jQuery不要处理发送的数据
                contentType: false,  // 告诉jQuery不要设置内容类型头
                success: function(response) {
                    $('.alert-success').removeClass('d-none');
                    // 处理成功响应
                    // ...
                },
                error: function() {
                    // 处理错误
                    // ...
                }
            });
        }
    </script>
</body>
</html>

PHP部分（

js、jquery、Bootstrap实现拖拽上传文件

评论已关闭

推荐阅读