Cordova XMLHttpRequest PHP上传

Question

I am working with Cordova, and am trying to upload an audio file to my server through a PHP script.

I am working off of this example

https://cordova.apache.org/blog/2017/10/18/from-filetransfer-to-xhr2.html

The example code suggests to pass the read-in file object as a blob.

reader.onloadend = function() {
// Create a blob based on the FileReader "result", which we asked to be retrieved as an ArrayBuffer
var blob = new Blob([new Uint8Array(this.result)], { type: "image/png" });
var oReq = new XMLHttpRequest();
oReq.open("POST", "http://mysweeturl.com/upload_handler", true);
oReq.onload = function (oEvent) {
// all done!
};
// Pass the blob in to XHR's send method
oReq.send(blob);
};

I have modified the code to attach it as a data object as the file isn't being created

window.resolveLocalFileSystemURL(fileSystem, function (dir) {

dir.getFile(fileName, {create: true}, function (fileEntry) {

fileEntry.file(function (file) {

var reader = new FileReader();

reader.onloadend = function() {

var data = new FormData();

var oReq = new XMLHttpRequest();
oReq.open("POST", "http://mywebsite.com/up.php", true);

var blob = new Blob([new Uint8Array(this.result)], { type: "audio/mpeg" });
data.append('fileToUpload', blob );

oReq.onload = function (oEvent) {
// all done!

};
// Pass the blob in to XHR's send method
oReq.send(data);

};

// Read the file as an ArrayBuffer
reader.readAsArrayBuffer(file);

}

...

My php

$target_dir = $_SERVER['DOCUMENT_ROOT'] . "/uploads/";
$target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]);

if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file)) {
//echo "uploaded";
} else {
//echo "error";
}

• I have confirmed I have read/write privileges.
• I have confirmed I can upload the test audio file using a standard html form and the above php script.
• I have checked my vhost error logs and Apache system logs and have not seen any errors. I can see the POST being made but no error messages.
• I have confirmed the file object obtained by Cordova is accurate and does exist.
• I have tried several different mime types with no effect

Any help would be much appreciated.

Thanks

Answer 1

try this.

<?php
   print_r($_FILES);
   $new_image_name = "YEAH.jpg";
   move_uploaded_file($_FILES["file"]["tmp_name"], "/var/www/TEST/".$new_image_name);
?>

js code

<script type="text/javascript" charset="utf-8">

// Wait for PhoneGap to load
document.addEventListener("deviceready", onDeviceReady, false);

// PhoneGap is ready
function onDeviceReady() {
    console.log("device ready");
    // Do cool things here...
}

function getImage() {
    // Retrieve image file location from specified source
    navigator.camera.getPicture(uploadPhoto, function(message) {
                alert('get picture failed');
            },{
                quality: 50,
                destinationType: navigator.camera.DestinationType.FILE_URI,
                sourceType: navigator.camera.PictureSourceType.PHOTOLIBRARY
            }
    );

}

function uploadPhoto(imageURI) {
    var options = new FileUploadOptions();
    options.fileKey="file";
    options.fileName=imageURI.substr(imageURI.lastIndexOf('/')+1);
    options.mimeType="image/jpeg";

    var params = new Object();
    params.value1 = "test";
    params.value2 = "param";

    options.params = params;
    options.chunkedMode = false;

    var ft = new FileTransfer();
    ft.upload(imageURI, "http://some.server.com/TEST/upload.php", win, fail, options);
}

function win(r) {
    console.log("Code = " + r.responseCode.toString()+"
");
    console.log("Response = " + r.response.toString()+"
");
    console.log("Sent = " + r.bytesSent.toString()+"
");
    alert("Code Slayer!!!");
}

function fail(error) {
    alert("An error has occurred: Code = " + error.code);
}

</script>