想要上傳圖片到服務器使用phonegap android

我正在做android phonegap項目，我想上傳圖片到服務器。想要上傳圖片到服務器使用phonegap android

但我不明白，我應該在哪裏放這段代碼。

我無法顯示任何按鈕來上傳照片，請幫助。

我是新來的。我從phonegap文檔中引用了這些代碼。

我嘗試了幾個小時，但無法獲得更好的解決方案。

這是我第一個android phonegap項目。

代碼：

<head> 
    <script type="text/javascript" charset="utf-8" src="cordova-2.4.0.js"></script> 
    <script type="text/javascript" charset="utf-8">   
    document.addEventListener("deviceready", onDeviceReady, false); 

    function onDeviceReady() {   
     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 = {}; 
     params.value1 = "test"; 
     params.value2 = "param"; 

     options.params = params; 

     var ft = new FileTransfer(); 
     ft.upload(imageURI, encodeURI("http://some.server.com/upload.php"), win, fail, options); 
    } 

    function win(r) { 
     console.log("Code = " + r.responseCode); 
     console.log("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> 
    <h1>Example</h1> 
    <p>Upload File</p> 
</body>

來源

2013-07-03 Manu

錯誤：找不到變量：FileUploadOptions – nick

您使用下面的代碼解決您的問題：

<script type="text/javascript"> 
function uploadFromGallery() { 

    // Retrieve image file location from 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)+'.png'; 
    options.mimeType="text/plain"; 

    var params = new Object(); 

    options.params = params; 

    var ft = new FileTransfer(); 
    ft.upload(imageURI, encodeURI("http://some.server.com/upload.php"), win, fail, options); 
} 

function win(r) { 
    console.log("Code = " + r.responseCode); 
    console.log("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> 
    <a data-role="button" onClick="uploadFromGallery();">Upload from Gallery</a> 
</body>

查看這篇文章的詳細信息： https://stackoverflow.com/a/13862151/1853864

來源

2013-07-03 14:55:59

thankz很多它的工作原理 – Manu

感謝。它的正確解決。但我們需要上傳多張圖片。請給我一個想法，使用此cordova文件傳輸上傳多個圖像。 – Sathiyaraj

對不起兄弟:(我幫不了你，但我認爲使用文件傳輸。當我發現這個解決方案，我所使用的插件和一些原生代碼，Android和iOS，你不能上傳多張圖片。 –

這是我做的PIC上傳到服務器

function getphoto() 
{ 
    navigator.camera.getPicture(uploadPhoto, function(message) 
    { 
    alert('get picture failed'); 
    }, 

    { 
    quality: 10,destinationType:navigator.camera.DestinationType.FILE_URI,sourceType:navigator.camera.PictureSourceType.PHOTOLIBRARY }); 
    } 

function uploadPhoto(imageURI) 
{ 
    alert("imageURI: " + imageURI); 
    document.getElementById("myimg").src = imageURI; 
    alert("imageURI : " + imageURI); 
    var options = new FileUploadOptions(); 
    options.chunkedMode = false; 
    options.fileKey = "recFile"; 
    var imagefilename = imageURI; 
    options.fileName = imagefilename; 
    options.mimeType = "image/jpeg"; 
    var ft = new FileTransfer(); 
    ft.upload(imageURI, "http://192.168.5.109:86/YourService.svc/SaveImage", win, fail, options); 
} 

function win(r) 
{ 
    alert("Sent = " + r.bytesSent); 
} 

function fail(error) 
{ 
    switch (error.code) 
    { 
    case FileTransferError.FILE_NOT_FOUND_ERR: 
     alert("Photo file not found"); 
     break; 
    case FileTransferError.INVALID_URL_ERR: 
     alert("Bad Photo URL"); 
     break; 
    case FileTransferError.CONNECTION_ERR: 
     alert("Connection error"); 
     break; 
    } 

    alert("An error has occurred: Code = " + error.code); 
}

希望一個示例應用程序，這有助於

感謝 AB

來源

2013-07-03 11:02:02

PLZ proive我一些按鈕調用DIS上傳功能 – Manu

綁定起作用的一些按鈕！創建一個！ ;） – MAST3RMIND

亞我做到了，但沒有勝利或失敗警報顯示 – Manu

嘗試以下操作代碼。

// A button will call this function 
// To capture photo 
function capturePhoto() { 
    // Take picture using device camera and retrieve image as base64-encoded string 
    navigator.camera.getPicture(uploadPhoto, onFail, { 
     quality: 50, destinationType: Camera.DestinationType.FILE_URI 
    }); 
} 

// A button will call this function 
// To select image from gallery 
function getPhoto(source) { 
    // Retrieve image file location from specified source 
    navigator.camera.getPicture(uploadPhoto, onFail, { quality: 50, 
     destinationType: navigator.camera.DestinationType.FILE_URI, 
     sourceType: navigator.camera.PictureSourceType.PHOTOLIBRARY 
    }); 
} 

function uploadPhoto(imageURI) { 
    //If you wish to display image on your page in app 
    // Get image handle 
    var largeImage = document.getElementById('largeImage'); 

    // Unhide image elements 
    largeImage.style.display = 'block'; 

    // Show the captured photo 
    // The inline CSS rules are used to resize the image 
    largeImage.src = imageURI; 

    var options = new FileUploadOptions(); 
    options.fileKey = "file"; 
    var userid = '123456'; 
    var imagefilename = userid + Number(new Date()) + ".jpg"; 
    options.fileName = imagefilename; 
    options.mimeType = "image/jpg"; 

    var params = new Object(); 
    params.imageURI = imageURI; 
    params.userid = sessionStorage.loginuserid; 
    options.params = params; 
    options.chunkedMode = false; 
    var ft = new FileTransfer(); 
    var url = "Your_Web_Service_URL"; 
    ft.upload(imageURI, url, win, fail, options, true); 
} 
//Success callback 
function win(r) { 
    alert("Image uploaded successfully!!"); 
} 
//Failure callback 
function fail(error) { 
    alert("There was an error uploading image"); 
} 
// Called if something bad happens. 
// 
function onFail(message) { 
    alert('Failed because: ' + message); 
}

在您的HTML頁面上創建一個按鈕，在它的onclick事件調用函數根據您的要求。

致電capturePhoto()功能捕捉和上傳照片。
致電getPhoto()函數從圖庫中獲取圖像。

HTML應該帶有按鈕：

<input name="button" type="button" onclick="capturePhoto()" value="Take Photo"/> 

<input name="button" type="button" onclick="getPhoto();" value="Browse" />

希望有所幫助。

來源

2013-07-03 11:54:22

如何，在何處以及何時調用uploadPhoto（imageURI）功能和什麼將是imageURI參數中的值？ –

@ jolly.exe'uploadPhoto（）'得到在'capturePhoto（）'成功回調自動調用和imageURI將自動發送。你不必在任何地方明確地調用它。 –

我也面臨着類似的問題，但沒能解決它。你可以請這個問題stackoverflow.com/questions/40514847 – Ironic

嗯，這是我的工作。

trustAllHosts: Optional parameter, defaults to false. If set to true, it accepts all security certificates. This is useful since Android rejects self-signed security certificates. Not recommended for production use. Supported on Android and iOS. (boolean)

最後一個參數添加true如何布爾值。

之前

var ft = new FileTransfer(); 
ft.upload(fileURL, encodeURI("http://some.server.com/upload.php"), win, fail, options);

後

var ft = new FileTransfer(); 
ft.upload(fileURL, encodeURI("http://some.server.com/upload.php"), win, fail, options, true);

來源

2014-09-29 15:39:58 John

enter link description here

這是使用通過科爾多瓦或PhoneGap的功能到服務器上載多個圖像的鏈接100％的工作方法HTML Java腳本

Multiple Image upload to server in Cordova

來源

2017-09-14 06:13:56

想要上傳圖片到服務器使用phonegap android

回答

相關問題