文件上传按钮在 Cordova / Phonegap 项目中仍然不起作用答案

【问题标题】：File upload button is still not working in Cordova / Phonegap Project文件上传按钮在 Cordova / Phonegap 项目中仍然不起作用
【发布时间】：2015-01-28 12:21:08
【问题描述】：

我无法将图片上传到具有 PHP 后端的网络服务器。我的科尔多瓦相机脚本能够拍照并以小尺寸显示图片。但它无法上传图像。我不知道为什么。我调用函数 photoUpload();并在按钮中设置一个 onClick 事件，如

<button class="camera-control" onclick="photoUpload();">UPLOAD</button>

这是我的 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) {
    $("#cameraPic").attr("src", 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!');
        }
    }

    function photoUpload() {
    var fileURI = $("#cameraPic").attr("src");
    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://xxxx/app/upload.php"), win, fail, options);
    }

}


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);
}

【问题讨论】：

你试过调试它吗？如果它进入功能上传照片？
在萤火虫中我得到这个：ReferenceError: photoUpload is not defined
所以检查你的 js 文件是否从服务器加载，这真的是你的 js 文件和你的代码，而不是服务器返回的默认 *.html 文件。
不，我的 js 代码包含在我的 .html 文件中。
@hossi，你几天前也问过同样的问题，我的建议对你有帮助吗？ stackoverflow.com/questions/27155646/…

标签： javascript function cordova upload

【解决方案1】：

看你的函数photoUpload 位于函数onCapturePhoto 中！您需要将函数 photoUpload 移到顶层。

window.photoUpload = function() {
var fileURI = $("#cameraPic").attr("src");
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://xxxx/app/upload.php"), win, fail, options);
}

更好的方法是：

<button class="camera-control" id="photoUploadButton;">UPLOAD</button>

document.getElementById("photoUploadButton").addEventListener("click", photoUpload);

【讨论】：

我是这样弄的，但是upload-Button还是没有作用。