上傳之前在手機上的圖片預覽

我知道已經有一些答案了，但我真的不明白爲什麼那不工作在我的case.below是我的代碼上傳在遠程server.I使用phonegap和jquery mobile.Only問題上傳到服務器之前，圖像沒有顯示在頁面上。上傳之前在手機上的圖片預覽

<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圖像做每次，因爲其只顯示鏈接的圖像，我想只要我一個把它上傳到服務器一個顯示圖像，請幫忙 –

經過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

上傳之前在手機上的圖片預覽

回答

相關問題