Phonegap 3.7.0 来自输入的电子邮件文件[type=file]答案

【问题标题】：Phonegap 3.7.0 e-mail file from input[type=file]Phonegap 3.7.0 来自输入的电子邮件文件[type=file]
【发布时间】：2016-02-03 09:01:00
【问题描述】：

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

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

我能够弄清楚基本信息部分。我正在使用 $.ajax dataType: 'jsonp' 将数据发送到服务器，然后简单地通过电子邮件将其发送到我客户的地址。

但我可以找到一种将文件发送到服务器的方法。我正在使用 input[type=file] 字段让用户选择要上传的文件。我试过使用 FileTransfer 上传文件，但显然 input[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");

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

【问题讨论】：

标签： php android ajax cordova email

【解决方案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){

        }
});

【讨论】：

【解决方案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
    );}

【讨论】：