php - 将 Blueimp jQuery-File-Upload 与 wordpress 和联系表格 7 文件上传一起使用

Question

我正在使用 wordpress 4.8，contactform7 4.8和 jquery file upload

并尝试在联系表 7 中添加多个文件上传支持。

现在，我的脚本是

( function( $ ) {
    'use strict';
    var url = window.location.hostname === 'blueimp.github.io' ?
              '//jquery-file-upload.appspot.com/' : ajax_object.ajax_url;

    $('.wpcf7-multifile').fileupload({
        url: url,
        dataType: 'json',
        autoUpload: true,
        acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
        maxFileSize: 99900000,
        // Enable image resizing, except for Android and Opera,
        // which actually support image resizing, but fail to
        // send Blob objects via XHR requests:
        disableImageResize: /Android(?!.*Chrome)|Opera/
            .test(window.navigator.userAgent),
        previewMaxWidth: 100,
        previewMaxHeight: 100,
        previewCrop: true
    }).on('fileuploadadd', function (e, data) {
        //console.log(data.files);
        data.context = $('<div/>').appendTo('#files');
        data.formData = {action : 'do_file_upload'};
        $.each(data.files, function (index, file) {
            var node = $('<p/>')
                    .append($('<span/>').text(file.name));
            if (!index) {
                node
                    .append('<br>')
            }
            node.appendTo(data.context);
        });
    }).on('fileuploadprocessalways', function (e, data) {
        var index = data.index,
            file = data.files[index],
            node = $(data.context.children()[index]);
        if (file.preview) {
            node
                .prepend('<br>')
                .prepend(file.preview);
        }
        if (file.error) {
            node
                .append('<br>')
                .append($('<span class="text-danger"/>').text(file.error));
        }
    }).on('fileuploadprogressall', function (e, data) {
        var progress = parseInt(data.loaded / data.total * 100, 10);
        $('#progress .progress-bar').css(
            'width',
            progress + '%'
        );
    }).on('fileuploaddone', function (e, data) {
        console.log(data.result.files);
        $.each(data.result.files, function (index, file) {
            if (file.url) {
                var link = $('<a>')
                    .attr('target', '_blank')
                    .prop('href', file.url);
                $(data.context.children()[index])
                    .wrap(link);
            } else if (file.error) {
                var error = $('<span class="text-danger"/>').text(file.error);
                $(data.context.children()[index])
                    .append('<br>')
                    .append(error);
            }
        });
    }).on('fileuploadfail', function (e, data) {
        //console.log("upload failed");
        console.log(e);
        $.each(data.files, function (index) {
            var error = $('<span class="text-danger"/>').text('File upload failed.');
            $(data.context.children()[index])
                .append('<br>')
                .append(error);
        });
    }).prop('disabled', !$.support.fileInput)
        .parent().addClass($.support.fileInput ? undefined : 'disabled');

} )( jQuery );

这是我的 UploadHandler.php .

我的html是

<p><label> Multi File<br>
<span class="wpcf7-form-control-wrap multifile-966"><input type="file" name="multifile-966[]" size="40" class="wpcf7-form-control wpcf7-multifile multi-file" id="multi-file" multiple="multiple" aria-invalid="false"></span></label></p>

服务器站点ajax回调是

add_action('wp_ajax_do_file_upload', 'do_file_upload');
add_action('wp_ajax_nopriv_do_file_upload', 'do_file_upload');

if ( ! function_exists('do_file_upload') ){
    function do_file_upload(){
        $options = [
        'param_name' => key($_FILES)
    ];
    require('server/php/UploadHandler.php');
    $upload_handler = new UploadHandler($options);
    }
}

文件上传失败。

fileuploadfail 事件中 e 的控制台日志

n.Event {type: "fileuploadfail", timeStamp: 1500289969495, jQuery112406601460352960828: true, target: input#multi-file.wpcf7-form-control.wpcf7-multifile.multi-file, isTrigger: 3…}

网络响应 {"multifile-966":[{"name":"Beautiful-Nature-Images-Wallpaper-6755.jpg","size":565592,"type":"image\/jpeg ","url":"http:\/\/localhost\/contactform7\/wp-content\/uploads\/wpcf7_uploads\/Beautiful-Nature-Images-Wallpaper-6755.jpg","thumbnailUrl":"http:\/\/localhost\/contactform7\/wp-content\/uploads\/wpcf7_uploads\/thumbnail\/Beautiful-Nature-Images-Wallpaper-6755.jpg","deleteUrl":"http:\/\/localhost\/contactform7\/wp-admin\/admin-ajax.php?multifile-96=Beautiful-Nature-Images-Wallpaper-6755.jpg","deleteType":"DELETE"}]}0

预期的网络虚拟响应

{files: [,…]}
files
:
[,…]
0
:
{name: "46541-purple-sunrise-over-the-mountains-1920x1200-nature-wallpaper (1).jpg", size: 566874,…}

I converted these two response to array in UploadHandler.php file post method and both are 100% same !!only difference is a 0 at the end of the json response, may be that is giving some idea, but now I have no idea why not it is showing file upload failed, the file are getting uploaded but temporarily when I am refreshing the page, they disappeared .

还更新了 UploadHandler.php 。

更新

改变了

return $this->generate_response($response, $print_response);

到

$print_response = false;
    wp_send_json($this->generate_response($response, $print_response));

makes the extra 0 disappeared, but still the upload is temporary, but expected behavior is upload to be permanent.

更新2

在 UploadHandler.php 中用于

move_uploaded_file($uploaded_file, $file_path);

我说真的。 echo var_dump(move_uploaded_file($uploaded_file, $file_path)); 为 true。

Answer 1

更改 UploadHandler.php

这两行

 'upload_dir' => dirname(dirname($this->get_server_var('SCRIPT_FILENAME'))) . '/wp-content/uploads/wpcf7_uploads/',
            'upload_url' => $wp_content_url . 'wpcf7_uploads/',

到 wpcf7_uploads 旁边的任何其他文件夹 让它发挥作用。

我改成了

'upload_dir' => dirname(dirname($this->get_server_var('SCRIPT_FILENAME'))) . '/wp-content/uploads/2017/wpcf7_uploads/',
            'upload_url' => $wp_content_url . '2017/wpcf7_uploads/',