Bild uploaden über mobile Browser

G

ghostrider_bb

Grünschnabel
Hallo Zusammen,

Ich bin gerade dabei eine Anwendung zu schreiben welche auf mobile Geräte abziehlt...
Der Benutzer soll das Bild aus der Galerie auswählen können und nach abschicken des Formulars soll es in der DB gespeichert werden.
Außerdem möchte ich wenn man ein Bild ausgewählt habe eine Vorschau anzeigen lassen...

Jetzt die Frage da ich nichts brauchbares zu dem Thema im netz gefunden habe geht das überhaupt und wenn ja hat einer von euch evtl damit schon erfahrungen gesammelt und könnte mir da etwas unter die Arme greifen...

Ich hab leider absolut keine ahnung wie man das auf mobile Geräten angeht :-(
 
Das ganze bezieht sich eigentlich auch zu 90% auf Android
hintergrund... ich bin dabei eine bestehende iOS app nachzubauen und sie so über den MobileBrowser verfügbar zu machen auch für Androidler
 
Hier ein Beispiel wie du es machen kannst. Hol dir bei Google die phonegap-1.0.0.js

HTML: 
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Upload Image</title>

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /> 

<script type="text/javascript" charset="utf-8" src="phonegap-1.0.0.js"></script>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {
	function sendImage(src) {
		
		// Set the image source [library || camera]
		src = (src == 'library') ? Camera.PictureSourceType.PHOTOLIBRARY : Camera.PictureSourceType.CAMERA;
		
		// Aquire the image -> Phonegap API
		navigator.camera.getPicture(success, fail, {quality: 45, sourceType: src});
		
		// Successfully aquired image data -> base64 encoded string of the image file
		function success(imageData) {
			var url = 'http://www.DOMAIN.com/API/mobileImageUpload.php';
			var params = {image: imageData};
			
			// send the data
			$.post(url, params, function(data) {
				
				// Display the selected image on send complete
				$('#image').attr('src', 'data:image/jpeg;base64,' + params['image']);
				
			});
		}
		
		function fail(message) { alert(message); }
	}
	
	$('.send-image').click(function () { sendImage($(this).val()); }); 
});

</script>
</head>

<body>
    <p>
        <img style="width:60px; height:60px" id="image" src="" />
    </p>
    <p>
        <input type="button" class="send-image" value="camera" />
        <input type="button" class="send-image" value="library" />
    </p>
</body>
</html>

Und noch was PHP
PHP: 
<?php 

if ($_REQUEST['image']) {
	
	// convert the image data from base64
	$imgData = base64_decode($_REQUEST['image']);
	
	// set the image paths
	$file = '/uploads/' . md5(date('Ymdgisu')) . '.jpg';
	$url = 'http://www.mysite.com' . $file; 
	
	// delete the image if it already exists
	if (file_exists($file)) { unlink($file); }
	
	// write the imgData to the file
	$fp = fopen($file, 'w');
	fwrite($fp, $imgData);
	fclose($fp);
}

?>

Mit der phonegap kannst du viele Spielereien machen! :rolleyes:
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück