{"id":24872,"date":"2021-05-27T14:29:00","date_gmt":"2021-05-27T11:29:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=24872"},"modified":"2021-10-18T02:38:32","modified_gmt":"2021-10-17T23:38:32","slug":"so-integrieren-sie-den-ajax-datei-upload-in-wordpress","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/de\/so-integrieren-sie-den-ajax-datei-upload-in-wordpress\/","title":{"rendered":"So integrieren Sie den Ajax-Datei-Upload in WordPress"},"content":{"rendered":"<p>M\u00f6chten Sie den Ajax-Datei-Upload in WordPress implementieren? Manchmal m\u00fcssen Sie eine Aufgabe ausf\u00fchren, die eine Datei \u00fcber Ajax hochl\u00e4dt. In diesem Artikel lernen wir, wie man Ajax-Dateien in WordPress hochl\u00e4dt.<\/p>\n<p>Ein Vorteil beim Hochladen von Dateien \u00fcber Ajax besteht darin, dass die Serverlast reduziert wird. Ihre Seite wird nicht neu geladen, was zus\u00e4tzliche Aufrufe zu einem Server und damit die Bandbreite spart. Es f\u00fcgt auch eine bessere Benutzererfahrung auf Ihrer Website hinzu.<\/p>\n<p>Normalerweise rufen wir bei der Arbeit mit Ajax URL auf und \u00fcbergeben Daten an die angegebene URL oder rufen Daten von dieser ab. WordPress hat eine etwas andere M\u00f6glichkeit, Ajax-Operationen auszuf\u00fchren. In WordPress rufen wir die URL auf, aber der Code, den wir schreiben, um die Daten zu verarbeiten, wird in die Funktion aufgenommen. Dann muss diese Funktion dem in Ajax-Parametern \u00fcbergebenen &#8218;action&#8216;-Wert zugeordnet werden. Verwirrt? Sehen wir es in Aktion.<\/p>\n<h3>Ajax-Datei-Upload in WordPress<\/h3>\n<p>F\u00fcr den Einstieg ben\u00f6tigen Sie ein Formular mit der Dateieingabe. Wir geben bei der Auswahl einer Datei einen Ajax-Aufruf und laden die Datei auf einen Server hoch. Um ein Formular zu erstellen, f\u00fcgen Sie den folgenden HTML-Code zu Ihrer Seitenvorlage hinzu.<\/p>\n<pre><code>&lt;form class=\"fileUpload\" enctype=\"multipart\/form-data\"&gt;\n\u00a0\u00a0\u00a0\u00a0&lt;div class=\"form-group\"&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;label&gt;&lt;?php _e('Choose File:'); ?&gt;&lt;\/label&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;input type=\"file\" id=\"file\" accept=\"image\/*\" \/&gt;\n\u00a0\u00a0\u00a0\u00a0&lt;\/div&gt;\n&lt;\/form&gt;<\/code><\/pre>\n<p>Als n\u00e4chstes m\u00fcssen Sie einen Ajax-Aufruf f\u00fcr das \u00c4nderungsereignis der Dateieingabe ausf\u00fchren. Da wir einen Dateiinhalt an Ajax \u00fcbergeben, unterscheidet sich Ihr Code geringf\u00fcgig vom regul\u00e4ren jQuery-Code von <a href=\"https:\/\/codex.wordpress.org\/AJAX_in_Plugins\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">WordPress Ajax<\/a>.<\/p>\n<h4>JS-Datei in WordPress einbinden<\/h4>\n<p>Lassen Sie uns zuerst die JS-Datei in eine WordPress-Umgebung einbinden. Dieser Code wird <code>functions.php<\/code>in eine Datei oder in ein Site-spezifisches Plugin eingef\u00fcgt.<\/p>\n<pre><code>function aw_scripts() {\n\u00a0\u00a0\u00a0\u00a0\/\/ Register the script\n\u00a0\u00a0\u00a0\u00a0wp_register_script( 'aw-custom', get_stylesheet_directory_uri(). '\/js\/custom.js', array('jquery'), '1.1', true );\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\/\/ Localize the script with new data\n\u00a0\u00a0\u00a0\u00a0$script_data_array = array(\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'ajaxurl' =&gt; admin_url( 'admin-ajax.php' ),\n\u00a0\u00a0\u00a0\u00a0);\n\u00a0\u00a0\u00a0\u00a0wp_localize_script( 'aw-custom', 'aw', $script_data_array );\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\/\/ Enqueued script with localized data.\n\u00a0\u00a0\u00a0\u00a0wp_enqueue_script( 'aw-custom' );\n}\n\u00a0\nadd_action( 'wp_enqueue_scripts', 'aw_scripts' );<\/code><\/pre>\n<h4>Datei auf Server hochladen<\/h4>\n<p>Sie sind mit dem Formular und der JS-Datei fertig. F\u00fcgen Sie nun den folgenden Code in die JS-Datei ein, die den Dateiinhalt \u00fcber Ajax an die Serverseite sendet.<\/p>\n<p><strong>custom.js<\/strong><\/p>\n<pre><code>jQuery(function($) {\n\u00a0\u00a0\u00a0\u00a0$('body').on('change', '#file', function() {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$this = $(this);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0file_data = $(this).prop('files')[0];\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0form_data = new FormData();\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0form_data.append('file', file_data);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0form_data.append('action', 'file_upload');\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$.ajax({\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0url: aw.ajaxurl,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0type: 'POST',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0contentType: false,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0processData: false,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0data: form_data,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0success: function (response) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$this.val('');\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0alert('File uploaded successfully.');\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0});\n\u00a0\u00a0\u00a0\u00a0});\u00a0\u00a0\u00a0 \n});<\/code><\/pre>\n<p>Der wichtige Teil des obigen Codes ist, dass wir eine Aktion &#8218;file_upload&#8216; an das form_data-Objekt anh\u00e4ngen. Wir verwenden diese &#8218;file_upload&#8216;-Aktion, um mit den Formulardaten fortzufahren.<\/p>\n<p>In dem <code>functions.php<\/code>, Karte, diese Aktion mit dem Ajax wie folgt:<\/p>\n<pre><code>add_action( 'wp_ajax_file_upload', 'file_upload_callback' );\nadd_action( 'wp_ajax_nopriv_file_upload', 'file_upload_callback' );<\/code><\/pre>\n<p>Wenn Sie diesen Code in einem Plugin schreiben, m\u00fcssen Sie keine zweite Anweisung schreiben. Hier f\u00fcgen wir an &#8218;wp ajax_&#8216; und &#8218;wp_ajax_nopriv &#8218; den Aktionswert an, der &#8218;file_upload&#8216; ist. Der zweite Parameter &#8218;file_upload_callback&#8216; ist die Callback-Methode, die den eigentlichen Code zum Hochladen von Dateien enth\u00e4lt.<\/p>\n<pre><code>function file_upload_callback() {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$arr_img_ext = array('image\/png', 'image\/jpeg', 'image\/jpg', 'image\/gif');\n\u00a0\u00a0\u00a0\u00a0if (in_array($_FILES['file']['type'], $arr_img_ext)) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$upload = wp_upload_bits($_FILES[\"file\"][\"name\"], null, file_get_contents($_FILES[\"file\"][\"tmp_name\"]));\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/$upload['url'] will gives you uploaded file path\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0wp_die();\n}<\/code><\/pre>\n<p>Ich verwende eine <a href=\"https:\/\/codex.wordpress.org\/Function_Reference\/wp_upload_bits\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">wp_upload_bits-<\/a> Methode zum Hochladen von Dateien auf einen Server. Diese Methode speichert eine Datei direkt im Verzeichnis wp-content\/uploads.<\/p>\n<p>Fahren Sie fort und versuchen Sie, eine Datei hochzuladen. Ihre Datei sollte in den Ordner wp-content\/uploads\/ hochgeladen werden. Beachten Sie, dass Sie Ihre Datei im aktuellen Monatsordner des Uploads-Verzeichnisses finden.<\/p>\n<h3>Hochladen mehrerer Dateien mit Ajax in WordPress<\/h3>\n<p>Bisher haben wir das Hochladen einer einzelnen Datei \u00fcber Ajax besprochen. Es kann vorkommen, dass Sie mehrere Dateien mit Ajax hochladen m\u00f6chten. Mal sehen, wie man es erreicht.<\/p>\n<p>Um mehrere Dateien hochzuladen, m\u00fcssen Sie den obigen HTML-, JS- und PHP-Code geringf\u00fcgig \u00e4ndern.<\/p>\n<p>HTML bietet ein &#8218;multiple&#8216;-Attribut, das es einem Benutzer erm\u00f6glicht, mehrere Dateien bei der Dateieingabe auszuw\u00e4hlen.<\/p>\n<p><strong>HTML Quelltext<\/strong><\/p>\n<pre><code>&lt;form class=\"fileUpload\" enctype=\"multipart\/form-data\"&gt;\n\u00a0\u00a0\u00a0\u00a0&lt;div class=\"form-group\"&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;label&gt;&lt;?php _e('Choose File:'); ?&gt;&lt;\/label&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;input type=\"file\" id=\"file\" accept=\"image\/*\" multiple \/&gt;\n\u00a0\u00a0\u00a0\u00a0&lt;\/div&gt;\n&lt;\/form&gt;<\/code><\/pre>\n<p>Als Benutzer, der mehrere Dateien ausw\u00e4hlen m\u00f6chte, m\u00fcssen wir den JavaScript-Code \u00e4ndern, der jede Datei durchl\u00e4uft und daraus ein Array erstellt.<\/p>\n<p><strong>custom.js<\/strong><\/p>\n<pre><code>jQuery(function($) {\n\u00a0\u00a0\u00a0\u00a0$('body').on('change', '#file', function() {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$this = $(this);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0file_obj = $this.prop('files');\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0form_data = new FormData();\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0for(i=0; i&lt;file_obj.length; i++) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0form_data.append('file[]', file_obj[i]);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0form_data.append('action', 'file_upload');\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$.ajax({\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0url: aw.ajaxurl,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0type: 'POST',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0contentType: false,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0processData: false,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0data: form_data,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0success: function (response) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$this.val('');\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0alert('File(s) uploaded successfully.');\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0});\n\u00a0\u00a0\u00a0\u00a0});\n});<\/code><\/pre>\n<p>Und schlie\u00dflich durchlaufen wir in der Ajax-Callback-Funktion das Dateiarray und laden jede Datei auf einen Server hoch.<\/p>\n<pre><code>function file_upload_callback() {\n\u00a0\u00a0\u00a0\u00a0$arr_img_ext = array('image\/png', 'image\/jpeg', 'image\/jpg', 'image\/gif');\n\u00a0\n\u00a0\u00a0\u00a0\u00a0for($i = 0; $i &lt; count($_FILES['file']['name']); $i++) {\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if (in_array($_FILES['file']['type'][$i], $arr_img_ext)) {\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$upload = wp_upload_bits($_FILES['file']['name'][$i], null, file_get_contents($_FILES['file']['tmp_name'][$i]));\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/$upload['url'] will gives you uploaded file path\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0wp_die();\n}<\/code><\/pre>\n<p>Ich hoffe, Sie haben den Ajax-Datei-Upload in WordPress kennengelernt. Ich w\u00fcrde gerne Ihre Gedanken und Vorschl\u00e4ge im Kommentarbereich unten h\u00f6ren.<\/p>\n<h4>Zum Thema passende Artikel<\/h4>\n<ul>\n<li><a href=\"https:\/\/themewp.inform.click\/de\/so-laden-sie-wordpress-posts-mit-ajax\/\" title=\"So laden Sie WordPress-Beitr\u00e4ge mit AJAX\">So laden Sie WordPress-Beitr\u00e4ge mit AJAX<\/a><\/li>\n<li><a href=\"https:\/\/themewp.inform.click\/de\/so-verwenden-sie-jquery-ajax-in-wordpress\/\" title=\"So verwenden Sie jQuery Ajax in WordPress\">So verwenden Sie jQuery Ajax in WordPress<\/a><\/li>\n<li><a href=\"https:\/\/themewp.inform.click\/de\/datei-upload-per-drag-drop-mit-javascript-und-php\/\" title=\"Datei-Upload per Drag &amp; Drop mit JavaScript und PHP\">Datei-Upload per Drag &amp; Drop mit JavaScript und PHP<\/a><\/li>\n<\/ul>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Aufnahmequelle:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/artisansweb.net\" class=\"external external_icon\">artisansweb.net<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>M\u00f6chten Sie den Ajax-Datei-Upload in WordPress integrieren? In diesem Artikel nehme ich ein Beispiel und erkl\u00e4re Ihnen, wie Sie die Datei mit Ajax in . hochladen<\/p>\n","protected":false},"author":1,"featured_media":21665,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[607],"tags":[845],"class_list":["post-24872","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized-3","tag-affiai-de"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/posts\/24872","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/comments?post=24872"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/posts\/24872\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/media\/21665"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/media?parent=24872"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/categories?post=24872"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/tags?post=24872"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}