使用 Dropzone.js 时，如何使 maksbd19 的 wordpress 集成工作

Question

我正在尝试使 dropzone.js 在基于 maksbd19 提供的解决方案的 wordpress 框架内工作。我的问题是关于调试我实现的他的方法：

在此处查看他的指南： How to integrate Dropzonejs with wordpress media handler in frontend? 但我无法让他的解决方案正常工作。

这是我根据 post 中的答案加载 php 兼容性文件时遇到的错误：

Status Code:500 Internal Server Error PHP Parse error: syntax error, unexpected T_STRING in ...wordpress_compability.php on line 8.

在第 8 行我有这一行：

wp_localize_script('my-script','dropParam', $drop_param);

下面是我使用的完整代码：

html 文件：负责人：

<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/frameworks/dropzone/css/dropzone.css">
<script src="<?php bloginfo('template_url'); ?>/frameworks/dropzone/dropzone.js"></script>
<script src="<?php bloginfo('template_url'); ?>/frameworks/dropzone/wordpress_compability.js"></script>
<script src="<?php bloginfo('template_url'); ?>/frameworks/dropzone/wordpress_compability.php"></script>

正文：

<div id="media-uploader" class="dropzone"></div>
<input type="hidden" name="media-ids" value="">

JS文件：

    Dropzone.autoDiscover = false;
jQuery("#media-uploader").dropzone({
    url: dropParam.upload,
    acceptedFiles: 'image/*',
    success: function (file, response) {
        file.previewElement.classList.add("dz-success");
        file['attachment_id'] = response; // push the id for future reference
        var ids = jQuery('#media-ids').val() + ',' + response;
        jQuery('#media-ids').val(ids);
    },
    error: function (file, response) {
        file.previewElement.classList.add("dz-error");
    }
    // update the following section is for removing image from library
    addRemoveLinks: true,
    removedfile: function(file) {
        var attachment_id = file.attachment_id;        
        jQuery.ajax({
            type: 'POST',
            url: dropParam.delete,
            data: {
                media_id : attachment_id
            }
        });
        var _ref;
        return (_ref = file.previewElement) != null ? _ref.parentNode.removeChild(file.previewElement) : void 0;        
    }
});

PHP 文件:

<?
wp_enqueue_script('dropzone',"/var/www/vhosts/jtc.ae/httpdocs/pre/wp/wp-content/themes/Amazing_japan_HP/frameworks/dropzone/");
wp_enqueue_script('my-script',"/var/www/vhosts/jtc.ae/httpdocs/pre/wp/wp-content/themes/Amazing_japan_HP/frameworks/dropzone/dropzone.js",array('jquery','dropzone'));
$drop_param = array(
  'upload'=>admin_url( 'admin-post.php?action=handle_dropped_media' ),
  'delete'=>admin_url( 'admin-post.php?action=handle_deleted_media' ),
)
wp_localize_script('my-script','dropParam', $drop_param);


add_action( 'admin_post_handle_dropped_media', 'BMP_handle_dropped_media' );

// if you want to allow your visitors of your website to upload files, be cautious.
add_action( 'admin_post_nopriv_handle_dropped_media', 'BMP_handle_dropped_media' );



function handle_dropped_media() {
    status_header(200);

    $upload_dir = wp_upload_dir();
    $upload_path = $upload_dir['path'] . DIRECTORY_SEPARATOR;
    $num_files = count($_FILES['file']['tmp_name']);

    $newupload = 0;

    if ( !empty($_FILES) ) {
        $files = $_FILES;
        foreach($files as $file) {
            $newfile = array (
                    'name' => $file['name'],
                    'type' => $file['type'],
                    'tmp_name' => $file['tmp_name'],
                    'error' => $file['error'],
                    'size' => $file['size']
            );

            $_FILES = array('upload'=>$newfile);
            foreach($_FILES as $file => $array) {
                $newupload = media_handle_upload( $file, 0 );
            }
        }
    }

    echo $newupload;    
    die();
}
?>

有什么想法吗？

Answer 1

正如错误所说，有一个意外的字符串。您应该检查您是否将预期的参数传递给函数 - 请参阅 https://codex.wordpress.org/Function_Reference/wp_localize_script

另外这两行好像走错了路径

wp_enqueue_script('dropzone',"/var/www/vhosts/jtc.ae/httpdocs/pre/wp/wp-content/themes/Amazing_japan_HP/frameworks/dropzone/");
wp_enqueue_script('my-script',"/var/www/vhosts/jtc.ae/httpdocs/pre/wp/wp-content/themes/Amazing_japan_HP/frameworks/dropzone/dropzone.js",array('jquery','dropzone'));

wp_enqueue_script() 将脚本的路径作为第二个参数 (https://codex.wordpress.org/Function_Reference/wp_enqueue_script)，因此第一行可能应该是

wp_enqueue_script('dropzone',"/var/www/vhosts/jtc.ae/httpdocs/pre/wp/wp-content/themes/Amazing_japan_HP/frameworks/dropzone/dropzone.js");

第二个应该是依赖于 dropzone.js 的自定义脚本的路径 - 类似于

wp_enqueue_script('my-script',"/var/www/vhosts/jtc.ae/httpdocs/pre/wp/wp-content/themes/Amazing_japan_HP/frameworks/dropzone/myscript.js",array('jquery','dropzone'));

或者可能

wp_enqueue_script('my-script',"/var/www/vhosts/jtc.ae/httpdocs/pre/wp/wp-content/themes/Amazing_japan_HP/frameworks/dropzone/wordpress_compability.js",array('jquery','dropzone'));

if wordpress_compability.js 取决于 dropzone

如果你修复了你正在排队的脚本，也许 wp_localize_script() 会发现它的第一个参数格式更好。或者也许问题出在接下来的两个参数（数据）上。

编辑：这东西也不对：

<script src="<?php bloginfo('template_url'); ?>/frameworks/dropzone/dropzone.js"></script>
<script src="<?php bloginfo('template_url'); ?>/frameworks/dropzone/wordpress_compability.js"></script>
<script src="<?php bloginfo('template_url'); ?>/frameworks/dropzone/wordpress_compability.php"></script>

在你的 header.php 中吗？

首先，wp_enqueue_script() 已经将脚本添加到 html，因此这可能会造成混淆。其次，您不能包含这样的 .php 脚本。 <script src="... 语法适用于 .js 文件。

要包含 php 你需要像 @include('wordpress_compability.php') 这样的东西，可能在你的 functions.php

使用 Dropzone.js 时，如何使 maksbd19 的 wordpress 集成工作

When using Dropzone.js, how to make maksbd19's wordpress integration work

php

wordpress

dropzone.js