我知道有一些答案已经可用,但我真的不明白为什么那些不适合我的情况。下面是我在远程服务器上传的代码。我正在使用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>
答案 0 :(得分:1)
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应该有效。
答案 1 :(得分:0)
3天后我得到了我的查询解决方案,问题是模拟器,用apk文件测试下面的代码。不要浪费时间测试模拟器&#39; s。它不会预览图像。 下面的代码用于在上传之前预览图像。
<!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>
&#13;