アップロード前に画像をプレビューするphonegap

私はいくつかの回答がありますが、私は実際には私のcase.belowで動作していない理由を理解していないことを知っていますリモートserver.Iでアップロードするための私のコードですphonegapとjquery mobile.Only problemサーバーにアップロードする前に画像がページに表示されていません。アップロード前に画像をプレビューするphonegap

<html> 
 
<head> 
 
<title>File Transfer Example</title> 
 
<script type="text/javascript" src="cordova.js"></script> 
 
<script type="text/javascript"> 
 
     
 
function getImage() { 
 
navigator.camera.getPicture(uploadPhoto, function(message) { 
 
alert('get picture failed'); 
 
}, { 
 
quality: 100, 
 
destinationType: navigator.camera.DestinationType.FILE_URI, 
 
sourceType: navigator.camera.PictureSourceType.PHOTOLIBRARY 
 
}); 
 
     
 
} 
 

 
function uploadPhoto(imageURI) { 
 
document.getElementById("smallImage").src = imageURI 
 
} 
 
     
 
function uploadPhoto(imageURI) { 
 
     
 
    
 
var options = new FileUploadOptions(); 
 
options.fileKey = "file"; 
 
options.fileName = imageURI.substr(imageURI.lastIndexOf('/') + 1); 
 
options.mimeType = "image/jpeg"; 
 
console.log(options.fileName); 
 
var params = new Object(); 
 
params.value1 = "test"; 
 
params.value2 = "param"; 
 
options.params = params; 
 
options.chunkedMode = false; 
 
     
 

 
var ft = new FileTransfer(); 
 
ft.upload(imageURI, "http://abc.in/my.php", 
 
      
 
function(result){ 
 
console.log(JSON.stringify(result)); 
 
    alert('success'); 
 
}, function(error){ 
 
console.log(JSON.stringify(error)); 
 
}, options); 
 
    
 
} 
 
    
 
     
 
    
 
</script> 
 
</head> 
 
<body> 
 
<button onclick="getImage()">Upload a Photo</button><br> 
 
<img style="width:160px;" id="smallImage" src="" /> 
 
</body> 
 
</html>

出典

2016-12-07 Sagar Gopale

imageURIは、擬似パスなので、ローカルのHTMLページあなたに利用できない場合があります。

画像をアップロードした後、画像srcを更新することができます。

var ft = new FileTransfer(); 
ft.upload(imageURI, "http://abc.in/my.php", 

function(result){ 
    var data = JSON.stringify(result); 
    var imageSrc = data.src; // e.g: "http://abc.in/picture.jpg" 
    document.getElementById("smallImage").src = imageSrc; 
},

HTTP URLが動作するはずです。

出典

2016-12-07 07:32:45 gokaka

そのショーは画像のみをリンクされているため、それは、私が新しいulpoadedイメージに毎回それを行う方法を動作しますが、おかげで、私はすぐにiを1サーバー1にアップロードして画像を表示したいです、助けてください –

3日後、私は私の質問のための解決策を得ました、問題はシミュレータです、apkファイルでコードの下にテストしてください。テストシミュレータの時間を無駄にしません。下記のコードは、アップロード前に画像をプレビューするためのものです。

<!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 the format of returned value 
 

 
// Wait for device API libraries to load 
 
// 
 
document.addEventListener("deviceready",onDeviceReady,false); 
 

 
// device APIs are available 
 
// 
 
function onDeviceReady() { 
 
    pictureSource = navigator.camera.PictureSourceType; 
 
    destinationType = navigator.camera.DestinationType; 
 
} 
 

 

 
// Called when a photo is successfully retrieved 
 
// 
 
function onPhotoURISuccess(imageURI) { 
 

 
    // Show the selected image 
 
    var smallImage = document.getElementById('smallImage'); 
 
    smallImage.style.display = 'block'; 
 
    smallImage.src = imageURI; 
 
} 
 

 

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

 
    
 
    function uploadPhoto() { 
 

 
    //selected photo URI is in the src attribute (we set this on getPhoto) 
 
    var imageURI = document.getElementById('smallImage').getAttribute("src"); 
 
    if (!imageURI) { 
 
     alert('Please select an 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.chunkedMode = false; 
 

 
    options.params = { 
 
     firstname: document.getElementById("firstname").value, 
 
     lastname: document.getElementById("lastname").value 
 
    } 
 

 

 
    options.headers = { 
 
     Connection: "close" 
 
    }; 
 

 
    var ft = new FileTransfer(); 
 
    ft.upload(imageURI, encodeURI("http://abc.in/savepng.php"), win, fail, 
 

 
options); 
 
} 
 

 
// Called if something bad happens. 
 
// 
 
function onFail(message) { 
 
    console.log('Failed because: ' + message);alert('success'); 
 
} 
 

 
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> 
 

 
    <button onclick="getPhoto();">Select Photo:</button><br> 
 
    <img style="display:none;width:60px;height:60px;" id="smallImage" src="" /><br> 
 

 
<form id="regform"> 
 
    First Name: <input type="text" id="firstname" name="firstname"><br> 
 
    Last Name: <input type="text" id="lastname" name="lastname"><br> 
 
    <input type="button" id="btnSubmit" value="Submit" onclick="uploadPhoto();"> 
 
</form> 
 
</body> 
 
</html>

出典

2016-12-07 19:15:24

アップロード前に画像をプレビューするphonegap

答えて

関連する問題