2017-03-25 135 views
0

PhoneGap的文件傳輸上傳圖片到服務器

<!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'); 
 
\t \t image.src = imageData; 
 
\t \t var blob = image[0].getAsFile(); 
 
\t \t window.URL = window.URL || window.webkitURL; 
 
\t \t var blobUrl = window.URL.createObjectURL(blob); 
 

 
\t \t var file = blob; 
 
\t \t upload(file); 
 

 

 
function uploadImage(file){ 
 

 
\t \t 
 

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

 
} 
 

 
?>

,所以我嘗試創建一個PhoneGap的應用將圖片上傳到服務器。我首先創建了一個上傳文件夾並粘貼了upload.php。 javascript和html是index.html。我試着跑步,它允許我拍照並查看照片,但上傳照片時出現錯誤。怎麼來的?我寫錯了什麼?

<?php 
print_r($_FILES); 
move_uploaded_file($_FILES["file"]["tmp_name"], "uploads/". $_FILES["file"]["name"]); 
?> 

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); 
 
}
<!DOCTYPE HTML> 
 
<html> 
 

 
<head> 
 
    <title> HellowWorld PhoneGap App </title> 
 
    <script type="text/javascript" charset="utf-8" src="cordova.js"></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>

+0

什麼錯誤,請具體說明 – RiggsFolly

+0

@RiggsFolly 功能onUploadError(){ 警報(「上傳照片時出錯」); } 這個錯誤 – user7569149

+0

你在爲android建設嗎? – Harish

回答

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); 
+0

nope,我只是試過這個它仍然不工作.. – user7569149

+0

我試過了上傳功能,現在我不能點擊選擇圖像以及 – user7569149

+0

你需要轉換imageData之前調用上傳功能 – Aotoki