Erstellen eines intelligenten Remote-Upload-Skripts mit jQuery AJAX und PHP

9

Ich erstelle gerade ein Image-Hosting-Skript und bisher ist es so gut. Ich habe mehrere Plugins verwendet, um den lokalen Upload-Prozess mit Drag & amp; Drog + AJAX, das funktioniert ganz gut. Jetzt bin ich zu dem Teil umgezogen, wo ich den Remote-Upload-Prozess mit jQuery AJAX und einem PHP-Skript erstellen muss, um das Ganze zu handhaben.

Wie es funktioniert

Mein Gedanke ist so: Es gibt eine große Box in der Mitte der Seite, die die URLs akzeptiert, die per Fernzugriff hochgeladen werden sollen. Sobald gültige URL (s) in den Textbereich übergeben werden, werden sie sofort über jQuery AJAX an das serverseitige Skript gesendet. Es ist mit einem keyup -Ereignis verbunden.

So sieht es aus: Ссылка .
Der "HERE COME THE URLS" -Teil ist bereits ein Textbereich - also dieser Teil ist schon fertig.

Wo ich Hilfe brauche

Das Problem mit dieser ganzen Situation ist: Sobald gültige URLs in den Textbereich eingefügt werden, müssen diese sofort in eine Art Box konvertiert werden, die auch einen Upload-Fortschritt enthält. Etwas, das so aussieht (kopiert vom lokalen Upload-Teil): Ссылка

Es war einfach, den Fortschrittsanzeiger für das lokale Hochladen zu implementieren, da es eine Funktion war, die von dem Plugin angeboten wurde, das ich verwendet habe, aber Ich kann den Fortschritt des Remote-Uploads nicht angeben , die komplett von Grund auf neu gemacht wird.

So habe ich mir die Logik vorgestellt:

  1. Der Benutzer fügt einige URLs in den Textbereich
  2. ein
  3. Es gibt eine clientseitige Prüfung zur Überprüfung der eingefügten URLs
  4. Validierte URLs werden an upload.php in keyup (?) gesendet
  5. URLs werden verarbeitet
  6. Während der Upload läuft, zeigen wir den Nutzern den Fortschritt im Knopf ( ?)
  7. PHP-Skript beendet den Prozess und gibt die hochgeladenen URLs
  8. zurück
  9. Ich aktualisiere die Seite im AJAX success Callback, um die hochgeladenen Dateien anzuzeigen

Die zwei Prozessabläufe, die mit (?) gekennzeichnet sind, sind mir also unklar - ich weiß nicht, wie ich diese erreichen soll ...

Was ich versucht habe

Nun, ich bin nicht nur hergekommen und habe Sie gebeten, alles für mich zu tun, aber ich bin auf eine Sackgasse gestoßen und weiß nicht weiter. Bisher habe ich die URLs aus dem Textbereich gesammelt, und wenn mehrere URLs durch einen Zeilenumbruch getrennt sind ( \n ), verwende ich einfach split , um ein Array von eingefügtem Text zu erhalten und dann einen anderen zu verwenden Funktion innerhalb der Schleife, um zu überprüfen, ob es sich um URLs handelt. Wenn innerhalb des Textbereichs kein Zeilenumbruch erkannt wird, überprüfe ich einfach die angegebene Zeile. In jedem Fall sende ich den gesamten Textbereich an das PHP-Skript, weil ich nicht weiß, wie man die ungültigen URLs in jQuery loswerden kann . Ich habe eine Funktion mit dem Namen debug() in PHP erstellt, die alles in einer debug.log -Datei speichert und das ist, was ich bekomme (in einem Versuch), wenn ich etwas in den Textbereich einfüge:

%Vor%

Ich füge https://www.google.com/ einmal in den Textbereich ein, aber es wird zweimal auf der PHP Seite geloggt und ich kann nicht bestimmen warum.

So sieht meine jQuery aus:

%Vor%

Die Fragen

Die letzten Fragen sind also:

  • Wie sende ich meine Informationen korrekt an das PHP-Skript, nur gültige URLs und lasse sie in meinem PHP-Skript irgendwie "verarbeiten".
  • Wie kann ich den Fortschritt des Uploads angeben?

Wenn ich während meiner Frage etwas unklar war, lassen Sie es mich bitte wissen, ich werde versuchen, es erneut zu erklären.

Danke.

Aktualisierungen

09/12/2013

Ich glaube, es ist mir gelungen, das Problem des doppelten Sendens zu lösen, bei dem mein AJAX die gleichen Informationen zweimal an das PHP-Skript senden würde. Was ich getan habe, war Code in einer verzögerten anonymen Funktion, die den Inhalt des Textbereichs an das PHP-Skript sendet, nachdem ein Benutzer für zwei Sekunden aufhört zu tippen. Sobald der Benutzer die Eingabe wieder beendet, wird der Timer zurückgesetzt und eine neue AJAX-Anfrage wird gestellt. Also nehme ich an, dass dieses Problem gelöst wurde. Ich werde darauf zurückkommen, wenn etwas Seltsames passiert.

Jetzt bin ich immer noch mit dem Fortschrittsanzeige Teil. Ich würde mich über Ihre Gedanken freuen.

Mein neuer Code: Ссылка

    
Aborted 08.12.2013, 13:16
quelle

2 Antworten

1

Was Sie in Bezug auf den Kommunikationsfortschritt hin und her suchen, ist "pushen". Das bezieht sich auf die Technik des Servers, der Daten an den Client sendet, und nicht umgekehrt, was die Standardmethode von HTTP ist.

Sie haben viele Optionen zur Verfügung, wie im erklärenden Wikipedia-Artikel beschrieben, obwohl diese vielleicht relevanter sind Thema wäre Komet . Was passiert, ist, dass Sie den Trigger und den $.ajax -Aufruf genau so ausführen wie den, den Sie jetzt haben, aber Sie haben ein sehr langes Timeout gesetzt. Das gibt dem Server im Wesentlichen einen "Kanal", um Daten zurück an die Seite zu senden, sobald diese verfügbar sind.

Was Sie also brauchen, ist ein .php auf dem Server, der lange Abfragen verarbeiten kann und Daten zurücksendet, wenn sich der Upload-Fortschritt ändert (wahrscheinlich in Array-Form für mehrere Uploads). Dieser Artikel sollte Sie mit etwas jQuery-Code beginnen . Denken Sie daran, dass diese Anfrage nicht nach upload.php geht. Diese Anfrage geht an ein anderes Skript, das sich ausschließlich mit Upload-Prozentsätzen befasst und nur Daten zurückgibt, wenn diese verfügbar sind. Es kehrt nicht sofort wie alle anderen Skripte zurück - der Ajax wartet glücklich auf die Daten.

Trennen Sie Ihren Code auch nicht mit has_lbrs . Eine Zeile oder viele sind keine unterschiedlichen Fälle, eine Zeile ist nur ein Kantenfall von vielen Zeilen. Sie duplizieren den Code unnötig. Was macht der else Fall, der im allgemeinen Fall bricht? Außerdem ist die "Fehlerbehandlung" im Fall else irreführend. Die einzige Fehlermeldung, die Sie melden, ist, wenn es nur eine Zeile gibt und sie falsch ist. Was ist, wenn Sie zwei Zeilen haben und beide falsch liegen? Ihr Code sendet gerne ein leeres Array an upload.php .

Deshalb sollten Sie Ihren Code nicht so trennen, denn dann teilen Sie die Logik und bemerken sie nicht einmal.

    
Naltharial 09.12.2013, 14:08
quelle
0

In meinem Fall ist der beste Weg, Ihr cURL-Skript mit Ajax aufzurufen und es zum Hochladen Ihrer Dateien auf dem Remote-Server zu verwenden. Sie benötigen ajax.js, curl.php, index.php (welchen Namen auch immer Sie möchten) auf Ihrem App-Server. Und image.php, class.image.php (welcher Name auch immer Sie wollen) auf Ihrem Remote-Server.

Schritte, die ich für meine App gemacht habe

1) Ich werde ein Bild aus meiner index.php-Datei hochladen. Es ruft die curl.php-Datei mit ajax.js auf und die cURL-Datei überprüft die Dateierweiterung und alle (für die Sicherheit Ihrer App, stellen Sie sicher, was Sie den Benutzern erlauben, hochzuladen).

2) Jetzt lädt die curl-Datei die Datei mit dem Standarddateinamen in Ihren vordefinierten temporären Ordner.

3) Wenn die Funktion move_uploaded_file (die ich in meinem Skript verwendet habe) erfolgreich ausgeführt wird, können Sie Ihre cURL-Funktion aufrufen, um Ihre Daten als Post auf Ihrem Remote-Server zu senden, wo die Bilddatei Posts erhält und weiterverarbeitet. Sie können Ihre Klasse in image.php behalten oder Sie können zwei PHP-Dateien auf Ihrem entfernten Server erstellen, wie Sie wollen.

4) Jetzt sollten Sie in Ihrer Klassendatei nochmals überprüfen, ob es sich um eine Image-Datei handelt (und was immer Sie zulassen wollen) oder nicht, um die Sicherheit zu erhöhen. Wenn die Datei in Ordnung ist, können Sie sie umbenennen und die Datei in den Ordner einfügen, wenn Sie möchten.

5) Fügen Sie den neuen Namen und den Ordnernamen der Datei mithilfe der Remote-Datenbankverbindung in Ihre Datenbank ein. CURL zeigt das Ergebnis auf derselben Seite an.

Nun, warum cURL? Ich bevorzuge cURL, weil Sie einen geheimen Schlüssel oder eine API für Ihre Kommunikation hinzufügen können, um sie sicherer zu machen, mit anderen Bedingungen. Ihre Remote-Server-Datei, die alle Beiträge erhalten wird, wird prüfen, ob API == 'yourKey' dann wird andere Weise verarbeiten es wird nicht verarbeiten und niemand wird Bilder auf Ihrem Server mit Bots und alle senden können.

Ich weiß nicht, ob meine Antwort Ihnen helfen wird oder nicht, wahrscheinlich ist meine Methode langwierig oder nicht gut für Ihre App, aber versuchen Sie Google über cURL und Sie werden verstehen, was ich zu sagen versuche. Hoffe es gefällt dir und habe es verstanden. Wenn Sie irgendwelche Zweifel haben, können Sie mich jederzeit fragen.

    
viral4ever 13.12.2013 13:53
quelle

Tags und Links