phonegap filetransfer将图片上传到服务器

时间:2017-03-25 11:39:42

标签: javascript php cordova phonegap-plugins



function sticker1220() {  
  $(window).on("load resize scroll",function(){
    console.log('sticker1220');
    });
};

function sticker950() { 
  $(window).on("load resize scroll",function(){
    console.log('sticker950');
    });
};

function sticker320() { 
  $(window).on("load resize scroll",function(){
    console.log('sticker320');
    });
};

function checksize() {

  if ( $(window).width() > 1220 ) {
    sticker1220();
  } else if ( $(window).width() > 640 & $(window).width() < 1219 )  {
    sticker950();
  } else if ( $(window).width() < 639 ) {
    sticker320();
  }
};

checksize();
$(window).resize(function() {
checksize();
$('p').text($(window).width());
});
&#13;
<!DOCTYPE HTML>
<html>
<head>
<title> HellowWorld PhoneGap App </title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript">
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
alert("Ready ");
}

function capture(){
    navigator.camera.getPicture(onSuccess, onFail, { quality: 50,
        destinationType: Camera.DestinationType.FILE_URI,
        sourceType: navigator.camera.PictureSourceType.PHOTOLIBRARY
    }); 
}

var image = document.getElementById('myImage');
		  image.src = imageData;
		  var blob = image[0].getAsFile();
		  window.URL = window.URL || window.webkitURL;
		  var blobUrl = window.URL.createObjectURL(blob);

		  var file = blob;
		  upload(file);


function uploadImage(file){

		  

        var fd = new FormData();
        fd.append("file", file);
        var xhr = new XMLHttpRequest();

        xhr.open('POST', 'uploads/upload.php', true);
        xhr.send(fd);

    }

function onUploadSuccess(){
    alert('Photo Uploaded Successfully');
}

function onUploadError(){
    alert('Error uploading photo');
}

function onSuccess(imageData) {
    var image = document.getElementById('myImage');
    image.src = imageData;
    uploadImage(imageData);
}

function onFail(message) {
    alert('Failed because: ' + message);
}
  

</script>
</head>
<body>
<h1>Upload images to remote server</h1>

<div class="app">
<h4><a href="#" onclick="capture();">Select an Image</a></h4>
<img id="myImage" src="" width="50%">
</div>
    

</body>
</html>
&#13;
&#13;
&#13;

所以我尝试创建一个phonegap应用程序来将图片上传到服务器。我首先创建了一个上传文件夹并将upload.php粘贴在那里。 javascript和html是index.html。我试过跑,它允许我拍摄和查看图片,但上传图片时出错。怎么会?我写错了什么?

<?php

$destination = 'uploads/';

if (isset($_FILES["file"]["name"])) {

    $name = $_FILES["file"]["name"];
    $tmp_name = $_FILES['file']['tmp_name'];
    $error = $_FILES['file']['error'];

    //echo $name;
    //echo $tmp_name;
    //echo $error;

    move_uploaded_file($_FILES['file']['tmp_name'], $destination.$name);

}

?>

&#13;
&#13;
<?php
print_r($_FILES);
move_uploaded_file($_FILES["file"]["tmp_name"], "uploads/". $_FILES["file"]["name"]); 
?>
&#13;
document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady() {
  alert("Ready ");
}

function capture() {
  navigator.camera.getPicture(onSuccess, onFail, {
    quality: 50,
    destinationType: Camera.DestinationType.FILE_URI,
    sourceType: navigator.camera.PictureSourceType.PHOTOLIBRARY
  });
}


function uploadImage(imageData) {
  var serverURL = "localhost:3000/uploads/upload.php";
  var options = new FileUploadOptions();
  options.fileKey = 'file';
  options.fileName = imageData.substr(imageData.lastIndexOf('/') + 1);
  options.mimeType = "image/jpeg";

  var ft = new FileTransfer();
  ft.upload(imageData, serverURL, onUploadSuccess, onUploadError, options);
}

function onUploadSuccess() {
  alert('Photo Uploaded Successfully');
}

function onUploadError() {
  alert('Error uploading photo');
}

function onSuccess(imageData) {
  var image = document.getElementById('myImage');
  image.src = imageData;
  uploadImage(imageData);
}

function onFail(message) {
  alert('Failed because: ' + message);
}
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

首先你需要使用如下的isset,以避免某些错误:

<?php

$destination = './data/test/';

if (isset($_FILES["file"]["name"])) {

    $name = $_FILES["file"]["name"];
    $tmp_name = $_FILES['file']['tmp_name'];
    $error = $_FILES['file']['error'];

    //echo $name;
    //echo $tmp_name;
    //echo $error;

    move_uploaded_file($_FILES['file']['tmp_name'], $destination.$name);

}

?>

并使用此上传功能:

function upload(file){

        var fd = new FormData();
        fd.append("file", file);
        var xhr = new XMLHttpRequest();

        xhr.open('POST', 'upload.php', true);
        xhr.send(fd);

    }

要获取您的图像,在调用上传功能之前,您可以使用:

  var image = document.getElementById('myImage');
  image.src = imageData;
  var blob = image[0].getAsFile();
  window.URL = window.URL || window.webkitURL;
  var blobUrl = window.URL.createObjectURL(blob);

  var file = blob;
  upload(file);