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

Vue implementiert ein einfaches Einkaufswagenbeispiel

In diesem Artikel wird der spezifische Code von V...

So verwenden Sie CSS-Overflow: Hidden (Überlauf ausblenden und Floats löschen)

Überlauf ausblenden Damit ist gemeint, dass Text-...

Detaillierte Erklärung der API in Vue.js, die leicht zu übersehen ist

Inhaltsverzeichnis nächstesTick Syntaxvereinfachu...

Detaillierte Erläuterung der MySQL Limit-Leistungsoptimierung und der Paging-Daten-Leistungsoptimierung

MySQL Limit kann Datenbankdaten segmentweise abfr...

Axios storniert Anfragen und vermeidet doppelte Anfragen

Inhaltsverzeichnis Herkunft Status Quo Anfrage ab...

MySQL-Datenbank muss SQL-Anweisungen kennen (erweiterte Version)

Dies ist eine erweiterte Version. Die Fragen und ...

Farbverlaufseffekt im HTML-Hintergrund durch CSS-Stil erreicht

Screenshots der Effekte: Implementierungscode: Cod...

So verwenden Sie cc.follow zur Kameraverfolgung in CocosCreator

Cocos Creator-Version: 2.3.4 Demo-Download: https...

Sicherheitsüberlegungen zur Windows-Serververwaltung

Webserver 1. Der Webserver schaltet unnötige IIS-...

JavaScript-Operationselemente zeigen Ihnen, wie Sie den Seiteninhaltsstil ändern

Inhaltsverzeichnis 1. Bedienelemente 1.1. Element...

Detaillierte Erläuterung der MySQL-Installation und der neuen Kennwortauthentifizierungsmethode in MySQL 8.0

1. Einleitung Oracle hat MySQL 8.0GA veröffentlic...

Anwendungsbeispiele für React Hooks (6 gängige Hooks)

1. useState: Funktionskomponenten Status geben An...

Vue implementiert bidirektionale Datenbindung

In diesem Artikelbeispiel wird der spezifische Co...

JavaScript-Farbbetrachter

In diesem Artikelbeispiel wird der spezifische Ja...

Zwei Möglichkeiten zum korrekten Bereinigen von MySQL-Binlog-Protokollen

mysql bereinigt Binlog-Protokolle korrekt Vorwort...