Question

我从使用phonegap进行开发的应用程序发送文件时遇到问题。我是电话界的新手，所以我可能会试图以完全错误的方式解决这个问题，所以让我先描述最终目标。

我正在开发一个汽车租赁应用程序，我需要联系表格，以便用户可以下订单租车。该表格要求用户输入一些基本信息，如姓名和电话号码，并附上照片或扫描驾驶执照。

我能够找出基本的信息部分。我使用$ .ajax dataType：＆＃39; jsonp＆＃39;，将数据发送到服务器，然后只需将其通过电子邮件发送到我客户的地址。

但我可以找到一种方法将文件发送到服务器。我使用输入[type = file]字段让用户选择要上传的文件。我尝试使用FileTransfer上传文件，但显然输入[type = file]会为您提供一些假文件路径，而不能由FileTransfer.upload（）

直接使用

问题是，我无法理解如何为FileTransfer.upload函数获取正确的文件路径。

我已经尝试过另一种方式，通过使用FileReader读取文件。我尝试读取文件并将图像src设置为结果，但它不起作用（它显示损坏的图像图标而不是图像，相同的代码在PC上工作）。我也尝试将其输出为文本，输出一些数据（所以为什么它不能用于图像src？）。

因为我确实设法输出从文件中读取的数据作为文本，我以为我会将其发送到服务器并保存。

以下是代码的外观：在输入更改时，我将文件读入全局变量

$(".file1").change(function(e){
    var caster = e.target;
    var files = caster.files;

    if(FileReader && files && files.length) {
        var fr = new FileReader();
        fr.onloadend = function(e) {
            //$(".image").attr("src",e.target.result);
            window.file1base64 = e.target.result;
        }
        fr.readAsDataURL(files[0]);
    }
});

然后，当用户按下按钮时，我运行FileTransfer.upload，然后每0.1秒检查文件上传是否完整

function uploadSuccess(r) {
    $(".output").append(" Success ");
    window.fileStatus = true;
}

function uploadError(error) {
    $(".output").append(" Error "+error.code+" ");
    window.fileStatus = true;
    window.fileError = error.code;
}

function uploadFile() {
    $(".output").append(" uploadFile ");
    file = $('.file1').val().split('\\').pop();
    $(".output").append(" File-"+file+" ");

    if(file){
        $(".output").append(" fileExists ");
        var options = new FileUploadOptions();
        options.fileKey = "file";
        options.fileName = file;
        options.mimeType = "image/jpeg";
        options.chunkedMode = false;
        options.headers = {
            Connection: "close"
        };

        $(".output").append(" FileUploadOptions ");
        window.fileStatus = false;
        window.fileError = '';

        //fileuri = $(".image").attr("src");
        fileuri = window.file1base64;

        $(".output").append(" fileuri ");
        var ft = new FileTransfer();
        ft.upload(fileuri, encodeURI("http://***.***/savefile.php"), uploadSuccess, uploadError, options);

        $(".output").append(" upload ");
        checkFile();
    }
}

function checkFile() {
    if(!window.fileStatus) {
        $(".output").append(" check ");
        setTimeout(checkFile, 100);
        return;
    }
}

经过一些检查，它打印出错误3，我无法弄清楚这意味着什么或如何修复它。

服务器端代码就是这样：获取文件并保存

$dir_name = dirname(__FILE__)."/uploadedimages/";
move_uploaded_file($_FILES["file"]["tmp_name"], $dir_name."test.txt");

但是没有在服务器上创建文件。

Answer 1

使用FormData对象获取表单数据（包括输入文件）并以这种方式提交：

var data = new FormData($('#yourFormID')[0]);
$.ajax({
        url: serverURL,
        data: data,
        cache:false,
        contentType: false,
        processData: false,
        type: 'POST',
        error: function(jqXHR,textStatus,errorThrown){

        },
        success: function(data){

        }
});

Answer 2

你应该在一些变量中设置FILEURL并在一些html图像元素中设置图像，然后用它来传输图像。

像这样：

 function onPgCameraSuccess(imageData) {

    fileEntry.file(
    function(fileObj) {
            var previewImage= document.getElementById('SomeImageElement');
            fileName=imageData.substr(imageData.lastIndexOf('/')+1);
            fileURL=imageData;
            previewImage.src =imageData;
            $('#SomeTextBox').val(fileName);
        });
}

function SubmitPhoto(){
    var uOptions = new FileUploadOptions();
    var ft = new FileTransfer();

    uOptions .fileKey = "keyofyourfileonserver";
    uOptions .fileName = fileName;
    uOptions .mimeType = "image/jpeg"; 
    uOptions .httpMethod = "POST";
    uOptions .params = params;



    ft.upload(fileURL,
        urlofsvc,
        photoSuccess,
        photoFail,
        uOptions,
        true
    );}

来自输入[type = file]

2 个答案: