Ich bin mit Wordpress 4.8, contactform7 4.8 und jquery file uploadmit Blueimp jQuery-Datei-Hochladen mit Wordpress und Kontaktformular 7 Datei laden
und versuchen, mehrere Datei-Upload-Unterstützung in Kontaktformular 7.
jetzt hinzufügen möchten, mein Skript ist
(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);
und das ist mein UploadHandler.php.
mein html ist
<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>
Server-Site ajax Rückruf ist
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);
}
}
Datei-Upload fehlgeschlagen bekommen.
Konsolenprotokoll für e in fileuploadfail Ereignis
n.Event {type: "fileuploadfail", timeStamp: 1500289969495, jQuery112406601460352960828: true, target: input#multi-file.wpcf7-form-control.wpcf7-multifile.multi-file, isTrigger: 3…}
Netzwerkantwort {"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
erwartet Netzwerk dummy Reaktion
{files: [,…]}
files
:
[,…]
0
:
{name: "46541-purple-sunrise-over-the-mountains-1920x1200-nature-wallpaper (1).jpg", size: 566874,…}
ich diese beiden Reaktion auf Array in UploadHandler.php Datei konvertiert post-Methode und beide sind 100% gleich !! nur diff Eerence ist eine 0 am Ende der JSON-Antwort, kann sein, dass gibt eine Idee, aber jetzt habe ich keine Ahnung, warum nicht Dateiupload schlägt fehl, die Datei wird hochgeladen, aber vorübergehend, wenn ich die Aktualisierung bin Seite, sie verschwunden.
auch aktualisiert UploadHandler.php.
aktualisieren
geändert
return $this->generate_response($response, $print_response);
zu
$print_response = false;
wp_send_json($this->generate_response($response, $print_response));
die zusätzliche 0 verschwunden macht, aber immer noch der Upload ist vorübergehend, aber erwartete Verhalten ist, laden zu sein permanent.
update2
in UploadHandler.php für
move_uploaded_file($uploaded_file, $file_path);
Ich bin immer wahr. echo var_dump(move_uploaded_file($uploaded_file, $file_path)); ist true.
Hat 'console.log (Daten)' etwas zurückgeben? – Kramb
Haben Sie versucht, die [FormData API] (https://developer.mozilla.org/en/docs/Web/API/FormData) zu verwenden? –
@dingo_d schauen Sie sich bitte das jquery-Repository und sein Beispiel an. Danke, dass du auf meine Frage aufmerksam gemacht hast, es wird großartig sein, wenn du mir hilfst. –