Dateiupload über HTML5 auf Mobilgeräten

Dateiupload über HTML5 auf Mobilgeräten

Meistens werden Plug-Ins zum Hochladen von Dateien auf den PC verwendet, und es spielt keine Rolle, ob Flash eingeführt wird. Wenn jedoch auf dem mobilen Endgerät weiterhin verschiedene redundante Plug-Ins verwendet werden, werden Sie wahrscheinlich zu Tode kritisiert. Das Projekt muss über die Funktion zum Hochladen von Bildern verfügen. Da H5 bereits über entsprechende Schnittstellen und eine gute Kompatibilität verfügt, wird H5 bei der Implementierung natürlich Vorrang eingeräumt.

Die wichtigsten verwendeten Technologien sind:

Ajax

Dateileser

Formulardaten

HTML-Struktur:

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. < div   Klasse = "Kamerabereich" >   
  2.        < Formular   enctype = "multipart/Formulardaten"   Methode = "posten" >   
  3.          < Eingabe   Typ = "Datei"   Name = "Hochzuladende Datei"   Klasse = "Hochzuladende Datei"   akzeptieren = "Bild/*"   Aufnahme = "Kamera" />   
  4.            < div   Klasse = "Upload-Fortschritt" > < span > </ span > </ div >   
  5.          </ form >   
  6.        < div   Klasse = "Daumen" > </ div >   
  7.    </div>​​   
  8.   

Das gepackte upload.js hängt von zepto ab

JavaScript CodeInhalt in die Zwischenablage kopieren
  1. ( Funktion ($) {
  2. $.extend($.fn, {
  3. Dateiupload: Funktion (Optionen) {
  4.        diese .each( Funktion () {
  5.          var $self = $( dies );
  6.          var doms = {
  7.            "Hochzuladende Datei" : $self.find( ".Hochzuladende Datei" ),
  8.            "Daumen" : $self.find( ".daumen" ),
  9.            "Fortschritt" : $self.find( ".upload-progress" )
  10. };
  11.          var funs = {
  12.            //Wählen Sie eine Datei aus und ermitteln Sie die Dateigröße. Sie können hier auch das Dateiformat ermitteln, um Benutzer daran zu hindern, Dateien in nicht erforderlichen Formaten hochzuladen.   
  13.            "DateiAusgewählt" : Funktion () {
  14.              var Dateien = (doms.fileToUpload)[0].files;
  15.              var Anzahl = Dateien.Länge;
  16.              für ( var index = 0; index < Anzahl; index++) {
  17.                var Datei = Dateien[Index];
  18.                var Dateigröße = 0;
  19.                wenn (Dateigröße > 1024 * 1024)
  20. Dateigröße = (Math.round(Dateigröße * 100 / (1024 * 1024)) / 100).toString() + 'MB' ;
  21.                anders   
  22. Dateigröße = (Math.round(Dateigröße * 100 / 1024) / 100).toString() + 'KB' ;
  23. }
  24. funs.uploadFile();
  25. },
  26.            // Dateien asynchron hochladen   
  27. Datei hochladen: Funktion () {
  28.              var fd = new FormData(); //Ein Formulardatenobjekt erstellen   
  29.              var Dateien = (doms.fileToUpload)[0].files;
  30.              var Anzahl = Dateien.Länge;
  31.              für ( var index = 0; index < Anzahl; index++) {
  32.                var Datei = Dateien[Index];
  33. fd.append(opts.file, file); //Fügen Sie die Datei den Formulardaten hinzu   
  34. funs.previewImage(file); //Vor dem Hochladen eine Vorschau des Bildes anzeigen. Sie können die TXT-Datei auch mit anderen Methoden in der Vorschau anzeigen.   
  35. }
  36.              var xhr = neue XMLHttpRequest();
  37. xhr.upload.addEventListener( "progress" , funs.uploadProgress, false ); //Upload-Fortschritt überwachen   
  38. xhr.addEventListener( "laden" , funs.uploadComplete, false );
  39. xhr.addEventListener( "Fehler" , opts.uploadFailed, false );
  40. xhr.open( "POST" , opts.url);
  41. xhr.send(fd);
  42. },
  43.            //Dateivorschau   
  44. previewImage: Funktion (Datei) {
  45.              var Galerie = doms.thumb;
  46.              var img = document.createElement( "img" );
  47. img.file = Datei;
  48. doms.thumb.html(Bild);
  49.              //Verwende die Methode FileReader um den Bildinhalt anzuzeigen   
  50.              var reader = neuer FileReader();
  51. reader.onload = ( Funktion (aImg) {
  52.                zurückkehren   Funktion (e) {
  53. aImg.src = e.Ziel.Ergebnis;
  54. };
  55. })(Bild);
  56. reader.readAsDataURL(Datei);
  57. },
  58. uploadProgress: Funktion (evt) {
  59.              wenn (evt.LängeBerechenbar) {
  60.                var ProzentAbgeschlossen = Math.round(evt.geladen * 100 / evt.gesamt);
  61. doms.progress.html(percentComplete.toString() + '%' );
  62. }
  63. },
  64.            "uploadComplete" : Funktion (evt) {
  65. Alarm (evt.target.responseText)
  66. }
  67. };
  68. doms.fileToUpload.on( "ändern" , Funktion () {
  69. doms.progress.find( "Spanne" ).Breite( "0" );
  70. funs.fileSelected();
  71. });
  72. });
  73. }
  74. });
  75. })(Zepto);

Aufrufmethode:

JavaScript CodeInhalt in die Zwischenablage kopieren
  1. $( ".camera-area" ).fileUpload({
  2.          "URL" : "Datei speichern.php" ,
  3.          "Datei" : "meineDatei"   
  4. });

PHP-Teil:

PHP CodeInhalt in die Zwischenablage kopieren
  1. <?php
  2. wenn (isset( $_FILES [ 'meineDatei' ])) {
  3.      // Beispiel:   
  4. schreibeLog( $_FILES );
  5. move_uploaded_file( $_FILES [ 'meineDatei' ][ 'tmp_name' ], "uploads/" . $_FILES [ 'meineDatei' ][ 'name' ]);
  6.      Echo   'erfolgreich' ;
  7. }
  8. Funktion writeLog( $log ){
  9.      wenn ( ist_Array ( $log ) || ist_Objekt ( $log )){
  10.          $log = json_encode( $log );
  11. }
  12.      $log = $log . "\r\n" ;
  13.   
  14.      file_put_contents ( 'log.log' , $log , FILE_APPEND);
  15. }
  16. ?>

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein.

Originaltext: http://www.cnblogs.com/hutuzhu/p/5254532.html

<<:  Beispiel für die Konvertierung von Webpack-Bildern in Base64

>>:  So ändern Sie den vorherigen Befehl, wenn in der MySQL-Eingabeaufforderung ein Eingabefehler auftritt

Artikel empfehlen

Lösung für Docker-Container, der Schriftarten wie Songti nicht erkennt

Problemhintergrund: Wenn Sie Docker zum Bereitste...

Beispielcode zur Implementierung der automatischen Markdown-Nummerierung mit reinem CSS

Der Ursprung des Problems Das erste Mal, dass ich...

Detaillierte Erläuterung des Installations- und Verpackungsfalls von JavaScript Axios

1. Laden Sie das Axios-Plugin herunter cnpm insta...

21 Best Practices zur MySQL-Standardisierung und -Optimierung!

Vorwort Jede gute Angewohnheit ist ein Schatz. Di...

Verwenden von js zum Implementieren eines einfachen Lichtschaltercodes

Körperteil: <button>Licht ein-/ausschalten&...

Beispielanalyse der Listen-Direktive in Nginx

Handlungsüberblick Im vorherigen Artikel haben wi...

Zusammenfassung der Bootstrap-Lernerfahrung - Austausch von Designs im CSS-Stil

Aufgrund der Anforderungen des Projekts habe ich ...

Verwenden Sie Nexus als private Bibliothek, um Docker zum Hoch- und Herunterladen von Bildern zu proxyen

1. Nexus-Konfiguration 1. Erstellen Sie einen Doc...

So installieren und konfigurieren Sie MySQL und ändern das Root-Passwort

1. Installation apt-get install mysql-server erfo...

Zusammenfassung der Grundkenntnisse und Vorgänge der MySQL-Datenbank

Dieser Artikel erläutert anhand von Beispielen di...

Informationen zur Installationsmethode für MySQL 8.0.13-ZIP-Pakete

MySQL 8.0.13 verfügt standardmäßig über einen Dat...

Persönlicher Test des Installationstutorials zur Dekomprimierungsversion von MySQL 8.0.12!

Die Installationsmethode für die dekomprimierte V...

Beispiel für die Konvertierung eines Zeitstempels in ein Datum in MySQL

Vorwort Ich bin bei der Arbeit auf folgende Situa...

Lernen Sie den Rendering-Prozess von HTML-Seiten kennen, um sich auf die Optimierung der Front-End-Leistung vorzubereiten (Fortsetzung)

Gestern Abend habe ich einen Aufsatz über den Bro...

Tutorial-Diagramm zur Installation von TomCat unter Windows 10

Installieren Sie TomCat unter Windows Dieser Arti...