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

HTML-Tabellen-Tag-Tutorial (24): horizontales Ausrichtungsattribut der Zeile ALIGN

In horizontaler Richtung können Sie die Zeilenaus...

So zeichnen Sie in CocosCreator ein cooles Radardiagramm

Inhaltsverzeichnis Vorwort Vorschau Text Grafikko...

js, um einen einfachen Karusselleffekt zu erzielen

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

Detaillierte Schritte zur Konfiguration der Linux-Firewall (basierend auf der Yum-Warehouse-Konfiguration)

Vorwort Dieses Experiment bereitet zwei virtuelle...

Detaillierte Erläuterung der MySQL-Benutzerrechteverwaltung

Inhaltsverzeichnis Vorwort: 1. Einführung in die ...

Zusammenfassung der grundlegenden Wissenspunkte der Linux-Gruppe

1. Grundlegende Einführung in die Linux-Gruppe Un...

Detaillierte Erläuterung der Ausführungsreihenfolge der JavaScript-Alarmfunktion

Inhaltsverzeichnis Frage analysieren lösen Ersetz...

Tiefgreifendes Verständnis der verschiedenen Sperren von MySQL

Inhaltsverzeichnis Schlossübersicht Sperrklassifi...

Eine kurze Diskussion über einige Vorteile von Vue3

Inhaltsverzeichnis 1. Quellcode 1.1 Monorepo 1.2 ...

Implementierungsschritte zum Erstellen eines lokalen Webservers auf Centos8

1 Übersicht System CentOS8, verwenden Sie httpd, ...

Die v-for-Direktive in Vue vervollständigt die Listendarstellung

Inhaltsverzeichnis 1. Listendurchlauf 2. Die Roll...

Berechnungstabelle für die RGBA-Alpha-Transparenzkonvertierung

Konvertierung zwischen RGBA- und Filterwerten unt...

Lösung für den ES-Speicherüberlauf beim Starten von Docker

Fügen Sie die Datei jvm.options zur Elasticsearch...

Nachdem Webpack-cli erfolgreich installiert wurde, prüfen Sie den Fehlerfall webpack -v für Details.

Inhaltsverzeichnis Frage 1. Installieren Sie webp...

Docker-Kern und spezifische Verwendung der Installation

1. Was ist Docker? (1) Docker ist ein Open-Source...