使用 Blueimp jQuery-File-Upload 与 wordpress 和联系表单 7 文件上传

Question

我正在使用wordpress 4.8，contactform7 4.8和jquery文件上传

并尝试在联系表单 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 );

这是我的上传处理程序.php。

我的网页是

<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,…}

我在 UploadHandler 文件发布方法中将这两个响应转换为数组.php并且两者都是 100% 相同的！！唯一的区别是末尾的 0 的 json 响应，可能是给出了一些想法，但现在我有 不知道为什么不显示文件上传失败，文件正在获取 上传但当我刷新页面时暂时，他们 消失。

还更新了上传处理程序.php .

更新

改变

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

自

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

使额外的 0 消失，但上传仍然是暂时的，但是 预期行为是永久上传。

更新2

在上传处理程序中.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/',