2012-03-14 11 views
7

私は(phonegap、Jqueryを使用して)画像をアップロードするための小さなアプリを持っています。私はjQueryがAJAX経由でアップロードを処理しています。画像が送信されていますが、私は壊れた場所で正しく処理する方法がわかりません。どんな考えも大歓迎です!ここに私のコードは、これまでのところです:PHPサーバPhonegapとJqueryから画像をアップロード

PHP:

<?php 
    ////////THE PROBLEM AREA I THNK////////// 
    if ($_REQUEST['image']) { 

      // convert the image data from base64 
      $imgData = base64_decode($_REQUEST['image']); 

      // set the image paths 
      $file = '/uploaded_files/' . md5(date('Ymdgisu')) . '.jpg'; 
      $url = 'http://creativetree.co/creativetreeAlpha' . $file; 

      // delete the image if it already exists 
      if (file_exists($file)) { unlink($file); } 

      // write the imgData to the file 
      $fp = fopen($file, 'w'); 
      fwrite($fp, $imgData); 
      fclose($fp); 
    } 

    echo "<h1>Page is online</h1>"; 
    echo "<p>Nothing special just a first go at phonegap! </p>"; 
    echo "<h2>Contents of uploaded_files Folder to show iphone upload</h2>"; 

    $dir = '/homepages/22/d397139588/htdocs/creativetreeAlpha/uploaded_files'; 

    if ($handle = opendir($dir)) { 
     while (false !== ($file = readdir($handle))) { 
      if ($file != "." && $file != "..") { 
       echo "$file\n"; 
       echo "<br>"; 
      } 
     } 
     closedir($handle); 
    } 
    ?> 

基本HTML:

<script> 
function onBodyLoad() { 
document.addEventListener("deviceready",onDeviceReady,false); 
} 
</script> 
</head> 
<body onload="onBodyLoad()"> 
<body> 
     <h1>Upload an image</h1> 

     <div id="upload"  
     <input type="button" class="send-image" value="camera" /> 
     <input type="button" class="send-image" value="library" /> 
     <img style="width:60px; height:60px" id="image" src="" /> 
     </div> 

<div id="output"></div> 
</body> 
</html> 

Javascriptを:あなたが使用してイメージを作成されているディレクトリのための

$(document).ready(function(){ 
    $(document).bind('deviceready', function(){ 

    function sendImage(src) { 

    src = (src == 'library') ? Camera.PictureSourceType.PHOTOLIBRARY : Camera.PictureSourceType.CAMERA; 
    navigator.camera.getPicture(success, fail, {quality: 45, sourceType: src}); 

          function success(imageData) { 
          var url = 'http://creativetree.co/creativetreeAlpha/mobileImageUpload.php'; 
          var params = {image: imageData}; 

          // send the data 
          $.post(url, params, function(data) { 
            alert('sent'); 
            // Display the selected image on send complete 
            $('#image').attr('src', 'data:image/jpeg;base64,' + params['image']);  
          }); 
          } 
} 

    function fail(message) { alert(message); } 

    $('.send-image').click(function() { sendImage($(this).val()); }); 

    }); 
}); 

答えて

0

短いストーリーを切る私のオンラインサーバーフォルダにアクセス許可を設定する必要がありました。

また、phonegapを使用してURLにアクセスする新しいiphoneデベロッパー(AJAXにとっては必然的)には注意が必要です。 URLはXcodeプロジェクトで設定する必要があります(PhoneGap.plistには外部URLを格納する配列が含まれています)。

これは明らかかもしれませんが、PhoneGapでさえ(または少なくとも私の激しいGoogle検索では見られなかった)あまりよく説明されていないようです。私が調べたwikiチュートリアルでは、これについて何も言及していませんでした。

詳細は画像を参照してください。

enter image description here

1

チェック書き込み権限fwrite。

関連する問題