forms - jquery mobile + cordova get photo and post via php mail -
i using jquery mobile 1.4.5 , cordova mobile app.
currently want send via php mail service photo taken user or photo photo gallery.
so far js cordova api:
var picturesource; // picture source var destinationtype; // sets format of returned value // wait device api libraries load // document.addeventlistener("deviceready",ondeviceready,false); // device apis available // function ondeviceready() { picturesource=navigator.camera.picturesourcetype; destinationtype=navigator.camera.destinationtype; } // called when photo retrieved // function onphotodatasuccess(imagedata) { // uncomment view base64-encoded image data // console.log(imagedata); // image handle // var smallimage = document.getelementbyid('smallimage'); // unhide image elements // smallimage.style.display = 'block'; // show captured photo // in-line css rules used resize image // smallimage.src = "data:image/jpeg;base64," + imagedata; } // called when photo retrieved // function onphotourisuccess(imageuri) { // uncomment view image file uri // console.log(imageuri); // image handle // var largeimage = document.getelementbyid('largeimage'); // unhide image elements // largeimage.style.display = 'block'; // show captured photo // in-line css rules used resize image // largeimage.src = imageuri; } // button call function // function capturephoto() { // take picture using device camera , retrieve image base64-encoded string navigator.camera.getpicture(onphotodatasuccess, onfail, { quality: 50, destinationtype: destinationtype.data_url }); } // button call function // function capturephotoedit() { // take picture using device camera, allow edit, , retrieve image base64-encoded string navigator.camera.getpicture(onphotodatasuccess, onfail, { quality: 20, allowedit: true, destinationtype: destinationtype.data_url }); } // button call function // called if bad happens. // function onfail(message) { alert('failed because: ' + message); } then use simple form in html:
<form method="post" action="my_server/mail.php" enctype="multipart/form-data" data-ajax="false"> <input name="attachment" type="file" id="attachment" /><br> <input type="submit" value="send" name="submit" class="btn"> </form> the mail.php is
<?php session_start(); if(isset($_post['mail'])){ // antiflood controle if (!empty($_session['antiflood'])) { $seconde = 20; $tijd = time() - $_session['antiflood']; if($tijd < $seconde) $antiflood = 1; } $email_to = "my_email"; $email_subject = "mobile form"; /* file variables */ $attachment = $field_file = $_post['attachment']; $tmpname = $_files['attachment']['tmp_name']; $filetype = $_files['attachment']['type']; $filename = $_files['attachment']['name']; $error_message = ""; $email_exp = '/^[a-za-z0-9._%-]+@[a-za-z0-9.-]+\.[a-za-z]{2,4}$/'; if(!preg_match($email_exp,$email_from)) { $error_message = "error"; } $string_exp = "/^[a-za-z .'-]+$/"; if(!preg_match($string_exp,$first_name)) { $error_message = "error"; } if(strlen($comments) < 2) { $error_message = "error"; } if(strlen($error_message) > 0) { $message_errorr = "error send, please try again"; echo "<script type='text/javascript'>alert('$message_errorr');</script>"; echo "<script language=javascript> javascript:history.back();</script>"; } function clean_string($string) { $bad = array("content-type","bcc:","to:","cc:","href"); return str_replace($bad,"",$string); } $datum = date('d/m/y h:i:s'); $email_message = "===================================================\n"; $email_message .= "mobile contact form " . $_server['http_host'] . "\n"; $email_message .= "===================================================\n\n"; $email_message .= "attachment: ".clean_string($filename)."\n\n"; $email_message .= "send on " . $datum . " ip address " . $_server['remote_addr'] . "\n\n"; $email_message .= "===================================================\n"; $email_message .= ":\n"; $email_message .= "===================================================\n\n"; $email_message .= $_server['http_user_agent']; // create email headers $headers = 'from: '.$email_from."\r\n". 'reply-to: '.$email_from."\r\n" . 'x-mailer: php/' . phpversion(); if (!empty($tmpname)) { /* reading file ('rb' = read binary) */ $file = fopen($tmpname,'rb'); $data = fread($file,filesize($tmpname)); fclose($file); /* boundary string */ $randomval = md5(time()); $mimeboundary = "==multipart_boundary_x{$randomval}x"; /* header file attachment */ $headers .= "\nmime-version: 1.0\n"; $headers .= "content-type: multipart/mixed;\n" ; $headers .= " boundary=\"{$mimeboundary}\""; /* multipart boundary above message */ $email_message = "this multi-part message in mime format.\n\n" . "--{$mimeboundary}\n" . "content-type: text/plain; charset=\"iso-8859-1\"\n" . "content-transfer-encoding: 7bit\n\n" . $email_message . "\n\n"; /* encoding file data */ $data = chunk_split(base64_encode($data)); /* adding attchment-file message*/ $email_message .= "--{$mimeboundary}\n" . "content-type: {$filetype};\n" . " name=\"{$filename}\"\n" . "content-transfer-encoding: base64\n\n" . $data . "\n\n" . "--{$mimeboundary}--\n"; } if (($error_message == "") && ($antiflood == "")) { $_session['antiflood'] = time(); @mail($email_to, $email_subject, $email_message, $headers); $message = "succesfully send, please wait our responce"; echo "<script type='text/javascript'>alert('$message');</script>"; echo "<script language=javascript> javascript:history.back();</script>"; } else {$message_errorr = "error send, please try again"; echo "<script type='text/javascript'>alert('$message_errorr');</script>"; echo "<script language=javascript> javascript:history.back();</script>"; } } ?> my querstion is, how can add form posted camera photo user has taken? id="smallimage" ?
thnx!
i manage both send form , upload both camera captured image (via cordova camera api) , attachment with:
function upload() { var img = document.getelementbyid('image'); var imageuri = img.src; var options = new fileuploadoptions(); options.filekey = "file"; options.filename = imageuri.substr(imageuri.lastindexof('/') + 1); options.mimetype = "image/jpeg"; var params = new object(); options.params = params; options.chunkedmode = false; var ft = new filetransfer(); ft.upload(imageuri, "server/upload.php", win, fail, options); } and
<script language="javascript"> function runscript() { upload(); } </script> while html submit button is
<input type="submit" value="send" name="submit" class="btn" onclick="runscript()"> i dont know if practice.
Comments
Post a Comment