wordpress爱找主题

要在WordPress前端创建一个自制的拖放区域来上传文件，你可以使用HTML、JavaScript和WordPress的后端功能。下面是一个基本的步骤：

1. 创建HTML结构：首先，在你的WordPress页面或帖子中添加一个HTML容器，用于拖放区域和文件上传按钮。

<div id="filedroparea">
    <div id="filedroptext">将文件拖放到此处</div>
    <input type="file" id="fileinput" multiple>
</div>
<div id="filelist"></div>

2. 添加JavaScript：使用JavaScript来实现拖放区域的功能和文件上传的处理。你可以将以下代码添加到页面底部或单独的JavaScript文件中：

document.addEventListener('DOMContentLoaded', function () {
    const fileDropArea = document.getElementById('filedroparea');
    const fileInput = document.getElementById('fileinput');
    const fileList = document.getElementById('filelist');

    fileDropArea.addEventListener('dragover', function (e) {
        e.preventDefault();
        fileDropArea.classList.add('dragover');
    });

    fileDropArea.addEventListener('dragleave', function () {
        fileDropArea.classList.remove('dragover');
    });

    fileDropArea.addEventListener('drop', function (e) {
        e.preventDefault();
        fileDropArea.classList.remove('dragover');
        const files = e.dataTransfer.files;

        for (const file of files) {
            const listItem = document.createElement('div');
            listItem.textContent = file.name;
            fileList.appendChild(listItem);
        }
    });

    fileInput.addEventListener('change', function () {
        const files = fileInput.files;

        for (const file of files) {
            const listItem = document.createElement('div');
            listItem.textContent = file.name;
            fileList.appendChild(listItem);
        }
    });
});

这段代码实现了拖放区域的基本功能，包括拖放效果和文件列表的显示。当用户拖放文件或选择文件后，文件名将显示在filelist容器中。

3. 处理文件上传：要将这些文件上传到WordPress后端，你可以使用WordPress的AJAX功能或表单提交。以下是一个使用AJAX的示例：

// 在上面的JavaScript代码后面添加

const uploadButton = document.getElementById('uploadbutton');

uploadButton.addEventListener('click', function () {
    const files = fileInput.files;
    const formData = new FormData();

    for (const file of files) {
        formData.append('files[]', file);
    }

    // 使用AJAX将文件上传到WordPress后端
    const xhr = new XMLHttpRequest();
    xhr.open('POST', '/wpadmin/adminajax.php?action=upload_files', true);

    xhr.onload = function () {
        if (xhr.status === 200) {
            // 上传成功后的处理
            alert('文件上传成功！');
        } else {
            // 上传失败后的处理
            alert('文件上传失败！');
        }
    };

    xhr.send(formData);
});

4. 处理文件上传的WordPress后端功能：你需要创建一个WordPress后端功能来处理文件上传请求。在你的主题的functions.php文件中添加以下代码：

// 在主题的functions.php文件中添加以下代码

function handle_upload_files() {
    if (!empty($_FILES['files'])) {
        $upload_dir = wp_upload_dir(); // 获取WordPress上传目录信息
        $file_paths = [];

        foreach ($_FILES['files']['name'] as $key => $name) {
            $file = $_FILES['files']['tmp_name'][$key];
            $file_name = sanitize_file_name($name);

            $file_path = $upload_dir['path'] . '/' . $file_name;

            if (move_uploaded_file($file, $file_path)) {
                $file_paths[] = $file_path;
            }
        }

        echo json_encode($file_paths); // 返回文件路径
    }

    wp_die();
}

add_action('wp_ajax_upload_files', 'handle_upload_files');
add_action('wp_ajax_nopriv_upload_files', 'handle_upload_files');

这段代码创建了一个WordPress后端功能handle_upload_files，它将上传的文件保存到WordPress上传目录，并返回文件路径。这个功能使用了WordPress的AJAX处理机制，可以在前端JavaScript中通过/wpadmin/adminajax.php?action=upload_files进行调用。

5. 样式化：最后，你可以添加CSS来样式化拖放区域和文件列表，以使其看起来更好。

这只是一个基本示例，你可以根据你的需求进一步扩展和定制。请注意，这里没有包含任何安全性检查，所以在实际使用中需要加强安全性。同时，确保你的WordPress环境具备文件上传的权限。