科尔多瓦:拍照后上传图像不起作用
Posted
技术标签:
【中文标题】科尔多瓦:拍照后上传图像不起作用【英文标题】:cordova: upload image not working after taking picture 【发布时间】:2015-01-25 03:56:42 【问题描述】:我正在开发一个使用 Apache Cordova aka Phonegap 开发的 ios 应用程序。 我想分两步上传照片: 1. 拍摄照片并以小尺寸显示照片 2.上传照片 我需要一键拍照和一键上传。
我的脚本不起作用。怎么了?
这是我的 javascript 文件:
var pictureSource;
var destinationType;
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady()
pictureSource = navigator.camera.PictureSourceType;
destinationType = navigator.camera.DestinationType;
function clearCache()
navigator.camera.cleanup();
var retries = 0;
function onCapturePhoto(fileURI)
var win = function (r)
clearCache();
retries = 0;
navigator.notification.alert(
'',
onCapturePhoto,
'Der Upload wurde abgeschlossen',
'OK');
console.log(r);
var fail = function (error)
navigator.notification.alert(
'Bitte versuchen Sie es noch einmal.',
onCapturePhoto,
'Ein unerwarteter Fehler ist aufgetreten',
'OK');
console.log("upload error source " + error.source);
console.log("upload error target " + error.target);
if (retries == 0)
retries ++
setTimeout(function()
onCapturePhoto(fileURI)
, 1000)
else
retries = 0;
clearCache();
alert('Fehler!');
*/do nothing*/
function capturePhoto()
navigator.camera.getPicture(onCapturePhoto, onFail,
quality: 50,
destinationType: destinationType.FILE_URI
);
function getPhoto(source)
navigator.camera.getPicture(onPhotoURISuccess, onFail,
quality: 50,
destinationType: destinationType.FILE_URI,
sourceType: source );
function onFail(message)
alert('Failed because: ' + message);
function photoUpload(imageData)
var options = new FileUploadOptions();
options.fileKey = "file";
options.fileName = fileURI.substr(fileURI.lastIndexOf('/') + 1);
options.mimeType = "image/jpeg";
options.chunkedMode = false;
var params = new Object();
params.fileKey = "file";
options.params = ; // eig = params, if we need to send parameters to the server request
var ft = new FileTransfer();
ft.upload(fileURI, encodeURI("http://XXXXXXXX.com/app/upload.php"), win, fail, options);
<div id="camera">
<button class="camera-control" onclick="capturePhoto();">Foto aufnehmen</button>
<button class="camera-control" onclick="getPhoto(pictureSource.PHOTOLIBRARY);">From Photo Library</button><br>
<div style="text-align:center;margin:20px;">
<img id="cameraPic" src="" style="width:auto;height:120px;"></img>
</div>
<button class="camera-control" onclick="photoUpload(imageData);">UPLOAD</button>
</div>
【问题讨论】:
【参考方案1】:1.拍摄照片并以小尺寸显示照片
在这里你可以设置成功的图片 onCapturePhoto(fileURI) e.g.
<img id="cameraPic" src= "" style="width:120px;height:120px;" > </img>
function onCapturePhoto(fileURI)
$("#cameraPic").attr("src", fileURI);
2。上传照片拍照一键上传
<button class="camera-control" onclick="photoUpload();">UPLOAD</button>
function photoUpload()
var fileURI = $("#cameraPic").attr("src");
/* YOUR CODE TO UPLOAD IMAGE*/
【讨论】:
我在这种情况下更改了我的代码。但是上传按钮仍然不起作用。函数 photoUpload() var fileURI = $("#cameraPic").attr("src"); var options = new FileUploadOptions(); options.fileKey = "文件"; options.fileName = fileURI.substr(fileURI.lastIndexOf('/') + 1); options.mimeType = "图像/jpeg"; options.chunkedMode = false;变量参数 = 新对象(); params.fileKey = "文件"; options.params = ;服务器请求的参数 var ft = new FileTransfer(); ft.upload(fileURI, encodeURI("xxx/app/upload.php"), win, fail, options); 告诉点击上传按钮后发生了什么...?告诉另一件事......你的科尔多瓦版本是什么......? 我的版本是 4.1.2。在 Firebug 我得到这个错误: ReferenceError: photoUpload is not defined 检查您是否缺少大括号或括号?或添加 //“向服务器请求的参数”注释这一行【参考方案2】:更新:
我刚刚重构了您的代码,希望对您有所帮助。
JavaScript
<script>
var sPicData; //store image data for image upload functionality
function capturePhoto()
navigator.camera.getPicture(picOnSuccess, picOnFailure,
quality: 20,
destinationType: Camera.DestinationType.DATA_URL,
sourceType: Camera.PictureSourceType.CAMERA,
correctOrientation: true
);
function getPhoto()
navigator.camera.getPicture(picOnSuccess, picOnFailure,
quality: 20,
destinationType: Camera.DestinationType.DATA_URL,
sourceType: Camera.PictureSourceType.SAVEDPHOTOALBUM,
correctOrientation: true
);
function picOnSuccess(imageData)
var image = document.getElementById('cameraPic');
image.src = imageData;
sPicData = imageData; //store image data in a variable
function picOnFailure(message)
alert('Failed because: ' + message);
// ----- upload image ------------
function photoUpload()
var options = new FileUploadOptions();
options.fileKey = "file";
options.fileName = sPicData.substr(sPicData.lastIndexOf('/') + 1);
options.mimeType = "image/jpeg";
options.chunkedMode = false;
var params = new Object();
params.fileKey = "file";
options.params = ; // eig = params, if we need to send parameters to the server request
ft = new FileTransfer();
ft.upload(sPicData, "http://XXXXXXXX.com/app/upload.php", win, fail, options);
function win()
alert("image uploaded scuccesfuly");
function fail()
alert("image upload has been failed");
</script>
HTML
<div id="camera">
<button class="camera-control" onclick="capturePhoto();">Foto aufnehmen</button>
<button class="camera-control" onclick="getPhoto();">From Photo Library</button><br>
<div style="text-align:center;margin:20px;">
<img id="cameraPic" src="" style="width:auto;height:120px;"></img>
</div>
<button class="camera-control" onclick="photoUpload();">UPLOAD</button>
</div>
【讨论】:
我是这样弄的,但是upload-Button没有作用。 好的,看看这个修改后的代码。只需使用它,它应该可以工作以上是关于科尔多瓦:拍照后上传图像不起作用的主要内容,如果未能解决你的问题,请参考以下文章