Plupload: So laden Sie direkt von einer Kamera hoch (auf Mobilgeräten)

Ich benutze Hochladen um Benutzern das Hochladen von Bildern auf meine WordPress-Website zu ermöglichen.

Wenn ein Benutzer auf „Dateien auswählen“ klickt und ein Bild aus der Galerie seines Mobiltelefons auswählt, wird der Dateiname des Bilds auf dem Bildschirm angezeigt. Der Benutzer kann dann auf „Dateien hochladen“ klicken, um den Upload zu starten.

Mein Problem

Wenn ein Benutzer auf „Dateien auswählen“ klickt und ein Foto mit seinem Kamerahandy aufnimmt, wird der Dateiname des Bildes nicht auf dem Bildschirm angezeigt. Wenn der Benutzer nun versucht, auf „Dateien hochladen“ zu klicken, passiert in diesem Fall nichts. Wie kann ich das lösen?

Anmerkungen

Das Problem tritt überhaupt nicht auf, wenn ich mein Tablet oder meinen Desktop verwende.

Aktualisieren

Meine Tests wurden mit zwei Mobilgeräten durchgeführt:

1. Chrome auf einem Samsung Galaxy S4 Mini mit Android 4.2.2
2. Chrome auf einem Samsung Galaxy Ace II mit Android 4.1.2

Hier ist eine Demo des Codes, den ich verwende: http://jsfiddle.net/djydce90/

Mein Skript

var uploader = new plupload.Uploader({
  runtimes : 'html5,flash,silverlight,html4',
  browse_button : 'pickfiles',
  container: document.getElementById( 'container' ),
  url : "/examples/upload",
  filters : {
    max_file_size : '10mb',
    mime_types: [
      {title : "Image files", extensions : "jpg,gif,png"},
      {title : "Zip files", extensions : "zip"}
    ]
  },
  flash_swf_url : '/plupload/js/Moxie.swf',
  silverlight_xap_url : '/plupload/js/Moxie.xap',
  init: {
    PostInit: function() {
      document.getElementById('filelist').innerHTML = '';

      document.getElementById('uploadfiles').onclick = function() {
        uploader.start();
        return false;
      };
    },
    FilesAdded: function(up, files) {
      plupload.each(files, function(file) {
        document.getElementById('filelist').innerHTML += '<div id="' + file.id + '">' + file.name + ' (' + plupload.formatSize(file.size) + ') <b></b></div>';
      });
    },
    UploadProgress: function(up, file) {
      document.getElementById(file.id).getElementsByTagName('b')[0].innerHTML = '<span>' + file.percent + "%</span>";
    },
    Error: function(up, err) {
      document.getElementById('console').innerHTML += "\nError #" + err.code + ": " + err.message;
    }
  }
});

uploader.init();

Mein HTML

<script src="https://rawgit.com/moxiecode/plupload/master/js/plupload.full.min.js"></script>
<div id="filelist">Your browser doesn't have Flash, Silverlight or HTML5 support.</div>
<br />
<div id="container">
  <a id="pickfiles" href="javascript:;">[Select files]</a>
  <a id="uploadfiles" href="javascript:;">[Upload files]</a>
</div>

Ref: http://www.plupload.com/examples/core

Das Problem kommt von der Methode zum Erfassen von Bildern. Android gibt Ihnen ein Bitmap-Objekt, wenn Sie ein Bild aufnehmen, also müssen Sie dieses Bitmap anstelle einer Datei hochladen. Wenn Sie eine Datei aus Ihrem Speicher auswählen, sendet es Ihnen diesen Pfad, aber Sie werden erfasst Geben Sie diese Fotodaten im Detail an. Sie müssen also diese Fotodaten hochladen, anstatt eine Datei hochzuladen. Ich weiß nicht genau, ob pluplaoad damit umgehen kann oder nicht, aber Sie können über diesen Link gehen, um einen Blick darauf zu werfen.

• Anzeigen von Plupload-Bildvorschauen mit Base64-codierten Daten-URLs