Codova 如何上傳圖片到Server

    不知道大家有沒有一種經驗，每次拍完照片後，還要把照片透過傳輸線才能在電腦上取得，如果透過簡單的工具自行DIY把圖透過無線傳輸到電腦上，不就超級方便了嗎?  當然啦!  作者以這無聊的動機，開始寫了簡單的範例程式。

步驟1 : 設計Codova的畫面Layout

Index.html

<!-- Cordova reference, this is added to your app when it's built. -->     <script src="cordova.js"></script>     <script src="scripts/platformOverrides.js"></script> <button onclick="capturePicture()">capture imBage</button><br /> <script src="scripts/index.js"></script> <div id="msg"></div>

步驟 2: 撰寫Codova的程式

Index.js

(function () {     "use strict";     document.addEventListener( 'deviceready', onDeviceReady.bind( this ), false );       function onDeviceReady() {         document.addEventListener( 'pause', onPause.bind( this ), false );         document.addEventListener('resume', onResume.bind(this), false);         pictureSource = navigator.camera.PictureSourceType;         destinationType = navigator.camera.DestinationType;     };     function onPause() {         // TODO: This application has been suspended. Save application state here.     };     function onResume() {         // TODO: This application has been reactivated. Restore application state here.     }; })(); var pictureSource;   // picture source var destinationType; // sets the format of returned value // 拍照功能 function capturePicture() {     navigator.camera.getPicture(onPhotoURISuccess, fail, {         quality: 50,         destinationType: destinationType.FILE_URI     }); } function onPhotoURISuccess(imageURI) {     var msg = document.getElementById('msg');     msg.innerText = 'got the image URI: ' + imageURI + ' attempting to upload ...';     try {         var options = new FileUploadOptions();         options.fileKey = 'file';         options.fileName = imageURI.substr(imageURI.lastIndexOf('/') + 1);         options.mimeType = 'image/jpeg';                var ft = new FileTransfer();         ft.upload(imageURI, 'http://192.168.1.63/stream/home/index', win, fail, options);         msg.innerText = 'upload complete';     } catch (err) {         var msg = document.getElementById('msg');         msg.innerText = 'error from catch: ' + err;     } } // 上傳成功的函式 function win(r) {     var msg = document.getElementById('msg');     msg.innerText = ' Sent = ' + r.bytesSent+'上傳成功; } // 上傳失敗的函式 function fail(error) {     var msg = document.getElementById('msg');     msg.innerText = 'An error has occurred: Code = ' = error.code; }

步驟 3: 把server網址列入config.xml的domain Access設定, 才不會被阻檔

步驟 4:  架一個MVC網站(簡易版的)

Server的 MVC 網站

public ActionResult Index()         { string strPath = @"D:\joyce\105\vedioStream\vedioStream\";              if (System.Web.HttpContext.Current.Request.Files.Count > 0)                 {                     HttpPostedFile file = System.Web.HttpContext.Current.Request.Files[0];                     string saveFile = file.FileName;                     file.SaveAs(strPath + saveFile);                 }                 return View();         }

   作者在server端架了MVC網站，由Codova 的FileTransfer 把圖片傳送到server的網址，透過HttpPostedFile file = System.Web.HttpContext.Current.Request.Files[0] 取得Codova 傳送的圖檔，是不是比傳統socket傳輸方式簡單多了吧!