javascript - Upload File (Photos and videos) to Server PHP with PhoneGap -
i've been working on phonegap based iphone application past few weeks , have run issue of file submission form. i'm new javascript , hoping help. need form users can submit name, email address, text, , photo or video submitted web server. tutorials i've found on topic far seem vague doesn't know in's , out's of js. following code seemed work pushing button didn't anything.
<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>
Comments
Post a Comment