在phonegap中上传之前的图像预览
Posted
技术标签:
【中文标题】在phonegap中上传之前的图像预览【英文标题】：Image previewing before upload in phonegap 【发布时间】：2016-12-07 06:59:17 【问题描述】：我知道已经有一些答案可用，但我真的不明白为什么这在我的情况下不起作用。下面是我在远程服务器中上传的代码。我正在使用 phonegap 和 jquery mobile。唯一的问题是图像没有显示在上传到服务器之前的页面。
<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>【问题讨论】：
【参考方案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 应该可以工作。
【讨论】：
谢谢它的工作，但我如何每次都为新的 ulpoaded 图像做它，因为它只显示链接的图像，我想在我将图像一一上传到服务器后立即显示图像，请帮助 【参考方案2】：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>【讨论】：
以上是关于在phonegap中上传之前的图像预览的主要内容，如果未能解决你的问题，请参考以下文章