cordova - PhoneGap upload Image to server on form submit -
i facing problem here in phonegap image uploaded server once u select picture.i don't want upload image before submitting form. image uploaded automatically server don't want.i want upload image form, form contains many more fields required send along image. possible ways submit form?
<!doctype html > <html> <head> <title>registration form</title> <script type="text/javascript" charset="utf-8" src="phonegap-1.2.0.js"></script> <script type="text/javascript" charset="utf-8"> // wait phonegap load document.addeventlistener("deviceready", ondeviceready, false); // phonegap ready function ondeviceready() { // cool things here... } function getimage() { // retrieve image file location specified source navigator.camera.getpicture(uploadphoto, function(message) { alert('get picture failed'); },{ quality: 50, destinationtype: navigator.camera.destinationtype.file_uri, sourcetype: navigator.camera.picturesourcetype.photolibrary });} function uploadphoto(imageuri) { var options = new fileuploadoptions(); options.filekey="file"; options.filename=imageuri.substr(imageuri.lastindexof('/')+1); options.mimetype="image/jpeg"; var params = new object(); params.value1 = "test"; params.value2 = "param"; options.params = params; options.chunkedmode = false; var ft = new filetransfer(); ft.upload(imageuri, "http://yourdomain.com/upload.php", win, fail, options); } function win(r) { console.log("code = " + r.responsecode); console.log("response = " + r.response); console.log("sent = " + r.bytessent); alert(r.response); } function fail(error) { alert("an error has occurred: code = " = error.code); } </script> </head> <body> <form id="regform"> <button onclick="getimage();">select avatar<button> <input type="text" id="firstname" name="firstname" /> <input type="text" id="lastname" name="lastname" /> <input type="text" id="workplace" name="workplace" class="" /> <input type="submit" id="btnsubmit" value="submit" /> </form> </body> </html>
create 2 functions can call separately. 1 function getting image, , function upload image.
you can below.
<!doctype html> <html> <head> <title>submit form</title> <script type="text/javascript" charset="utf-8" src="cordova.js"></script> <script type="text/javascript" charset="utf-8"> 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 onphotourisuccess(imageuri) { // show selected image var smallimage = document.getelementbyid('smallimage'); smallimage.style.display = 'block'; smallimage.src = imageuri; } // button call function // function getphoto(source) { // retrieve image file location specified source navigator.camera.getpicture(onphotourisuccess, onfail, { quality: 50, destinationtype: destinationtype.file_uri, sourcetype: source }); } function uploadphoto() { //selected photo uri in src attribute (we set on getphoto) var imageuri = document.getelementbyid('smallimage').getattribute("src"); if (!imageuri) { alert('please select image first.'); return; } //set upload options var options = new fileuploadoptions(); options.filekey = "file"; options.filename = imageuri.substr(imageuri.lastindexof('/')+1); options.mimetype = "image/jpeg"; options.params = { firstname: document.getelementbyid("firstname").value, lastname: document.getelementbyid("lastname").value, workplace: document.getelementbyid("workplace").value } var ft = new filetransfer(); ft.upload(imageuri, encodeuri("http://some.server.com/upload.php"), win, fail, options); } // called if bad happens. // function onfail(message) { console.log('failed because: ' + message); } function win(r) { console.log("code = " + r.responsecode); console.log("response = " + r.response); //alert("response =" + r.response); console.log("sent = " + r.bytessent); } function fail(error) { alert("an error has occurred: code = " + error.code); console.log("upload error source " + error.source); console.log("upload error target " + error.target); } </script> </head> <body> <form id="regform"> <button onclick="getphoto(picturesource.photolibrary);">select photo:</button><br> <img style="display:none;width:60px;height:60px;" id="smallimage" src="" /> first name: <input type="text" id="firstname" name="firstname"><br> last name: <input type="text" id="lastname" name="lastname"><br> work place: <input type="text" id="workplace" name="workplace"><br> <input type="button" id="btnsubmit" value="submit" onclick="uploadphoto();"> </form> </body> </html>
Comments
Post a Comment