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

MySQL verwendet ein Limit, um die Beispielmethode für Paging zu implementieren

1. Grundlegende Implementierung des Limits Im All...

JavaScript erklärt die Kapselung und Verwendung von Zeitlupenanimationen

Durchführung von Prozessanalysen (1) Wie rufe ich...

Ideen und Codes zur Implementierung des Wasserfall-Flow-Layouts im UniApp-Applet

1. Einleitung Gilt es als Aufwärmen alter Themen,...

Methoden zum Bereitstellen von MySQL-Diensten in Docker und die dabei auftretenden Fallstricke

Ich habe vor kurzem Porter gelernt. Ich habe das ...

Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7.15 (Windows)

Da ich MySQL installieren muss, zeichne ich den I...

So erstellen Sie geplante Aufgaben mit dem Crond-Tool in Linux

Vorwort Crond ist ein Tool zur geplanten Ausführu...

W3C Tutorial (2): W3C Programme

Der W3C-Standardisierungsprozess ist in 7 verschi...

So verwenden Sie den Linux-Paste-Befehl

01. Befehlsübersicht Der Einfügebefehl fügt die e...

Einführung in den Vue-Lebenszyklus und detaillierte Erklärung der Hook-Funktionen

Inhaltsverzeichnis Einführung in den Vue-Lebenszy...

Besser aussehende benutzerdefinierte CSS-Stile (Titel h1 h2 h3)

Rendern Häufig verwendete Stile im Blog Garden /*...

Mobile Frontend-Anpassungslösung (Zusammenfassung)

Ich habe online gesucht und festgestellt, dass in...

Zusammenfassung der Methoden zum Schreiben von Urteilsaussagen in MySQL

So schreiben Sie Urteilsaussagen in MySQL: Method...

MySQL-Indexoptimierung: Detaillierte Einführung in die Paging-Erkundung

Inhaltsverzeichnis MySQL-Indexoptimierung – Pagin...

Verwenden Sie Element+vue, um Start- und Endzeitlimits zu implementieren

In diesem Artikelbeispiel wird der spezifische Co...

Detaillierte Erläuterung des grundlegenden Implementierungsprinzips von MySQL DISTINCT

Vorwort DISTINCT ist tatsächlich der Implementier...