{"id":24618,"date":"2021-05-22T14:08:00","date_gmt":"2021-05-22T11:08:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=24618"},"modified":"2021-10-18T02:40:00","modified_gmt":"2021-10-17T23:40:00","slug":"ajax-datei-upload-mit-php-und-jquery","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/de\/ajax-datei-upload-mit-php-und-jquery\/","title":{"rendered":"Ajax-Datei-Upload mit PHP und jQuery"},"content":{"rendered":"

Suchen Sie einen Datei-Upload mit Ajax in PHP? Das Hochladen einer Datei \u00fcber Ajax ist heutzutage ein Trend. Es f\u00fcgt einer Website eine bessere Benutzererfahrung hinzu. In diesem Artikel zeige ich Ihnen, wie Sie mit PHP und jQuery Dateien \u00fcber Ajax hochladen.<\/p>\n

Das Hochladen von Dateien\/Bildern ist eine regelm\u00e4\u00dfige Aufgabe f\u00fcr Entwickler. Es gibt mehrere F\u00e4lle, in denen Sie eine Funktion zum Hochladen von Dateien erstellen m\u00fcssen. Einige der h\u00e4ufigsten Beispiele sind das Hochladen von Profilfotos, Slider-Bildern, Testimonials, Portfolios, Karussells usw.<\/p>\n

Warum ist ein Datei-Upload mit Ajax erforderlich?<\/h3>\n

Der Hauptgrund f\u00fcr den Datei-Upload \u00fcber Ajax besteht darin, dass Sie eine Seite nach dem Datei-Upload nicht aktualisieren m\u00f6chten. Und es ist offensichtlich. Es macht keinen Sinn, eine ganze Seite zu laden, wenn es nicht notwendig ist. Wenn Sie eine Seite nach dem Datei-Upload laden, f\u00fcgen Sie einem Server zus\u00e4tzliche Last hinzu.<\/p>\n

Das Hochladen von Dateien mit Ajax reduziert die unn\u00f6tige Belastung eines Servers und bietet eine bessere Benutzererfahrung auf der Website.<\/p>\n

Beginnen wir also ohne weitere Verz\u00f6gerung mit dem Code.<\/p>\n

Datei-Upload mit Ajax mit PHP und jQuery<\/h3>\n

Beginnen wir mit dem Erstellen eines Formulars mit einer Dateieingabe und der Schaltfl\u00e4che zum Senden. F\u00fcgen Sie den folgenden HTML-Code in Ihre Datei ein, sagen Sie index.php<\/code>.<\/p>\n

<form>\n\u00a0\u00a0\u00a0\u00a0<p><input type=\"file\" name=\"file\" class=\"file\" required><\/p>\n\u00a0\u00a0\u00a0\u00a0<input type=\"submit\" name=\"submit\" class=\"submit\" value=\"Submit\">\n<\/form><\/code><\/pre>\n
Da ich ein wenig JavaScript-Code schreiben werde, habe ich die Klasse ‚file‘ und ’submit‘ zur Dateieingabe- bzw. Diese Klassen dienen als Bezeichner f\u00fcr Formularelemente.<\/p>\n
JavaScript-Code<\/h4>\n
Schreiben Sie als N\u00e4chstes JavaScript-Code, der einen Ajax-Aufruf an eine Serverseite ausgibt und die Antwort verarbeitet.<\/p>\n
<script src=\"https:\/\/code.jquery.com\/jquery-3.5.0.js\"><\/script>\n<script type=\"text\/javascript\">\n\u00a0\u00a0\u00a0\u00a0$(function() {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$('.submit').on('click', function() {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var file_data = $('.file').prop('files')[0];\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if(file_data != undefined) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var form_data = new FormData();\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0form_data.append('file', file_data);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$.ajax({\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\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\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0url: 'ajax.php',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\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\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0processData: false,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\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\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\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if(response == 'success') {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\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\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0} else {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0alert('Something went wrong. Please try again.');\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$('.file').val('');\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0});\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return false;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0});\n\u00a0\u00a0\u00a0\u00a0});\n<\/script><\/code><\/pre>\n
Im obigen JavaScript-Code sende ich Dateiinhalt an die ajax.php<\/code>Datei und verarbeite auch die Antwort.<\/p>\n
PHP-Code<\/h4>\n
In diesem Stadium sind wir damit fertig, den Dateiinhalt an die Serverseite zu senden. Erstellen Sie nun eine Datei, ajax.php<\/code>in die wir den PHP-Code schreiben m\u00fcssen, der Dateien auf einen Server hochl\u00e4dt.<\/p>\n
ajax.php<\/strong><\/p>\n
<?php\nif (!file_exists('uploads')) {\n\u00a0\u00a0\u00a0\u00a0mkdir('uploads', 0777);\n}\n\u00a0\u00a0\nmove_uploaded_file($_FILES['file']['tmp_name'], 'uploads\/'. $_FILES['file']['name']);\n\u00a0\u00a0\necho \"success\";\ndie();<\/code><\/pre>\n
Der obige PHP-Code sucht zuerst nach dem Verzeichnis ‚uploads‘. Wenn dieses Verzeichnis nicht existiert, wird es erstellt und die Datei in diesen Ordner hochgeladen.<\/p>\n
Ich hoffe, Sie k\u00f6nnen das Hochladen von Dateien mit Ajax jetzt einfach auf Ihrer Website implementieren. Ich w\u00fcrde gerne Ihre Meinung im Kommentarbereich unten h\u00f6ren.<\/p>\n
Zum Thema passende Artikel<\/h4>\n