PHP Server从Phonegap和Jquery上传图像

时间:2012-03-14 14:16:42

标签: php javascript jquery cordova

好的我有一个用于上传图片的小应用程序(使用phonegap,Jquery)。我通过AJAX上传jquery处理。图像正在发送但我不确定如何在severside正确处理它。任何想法都非常欢迎!到目前为止,这是我的代码:

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()); });

  });
});

2 个答案:

答案 0 :(得分:1)

使用fwrite检查要在其中创建图像的目录的写入权限。

答案 1 :(得分:0)

简而言之,我需要在我的在线服务器文件夹上设置权限。

另外值得注意的是,任何使用phonegap并访问URL的新iphone开发人员(显然是AJAX必不可少的)。必须在Xcode项目中设置URL(PhoneGap.plist包含用于存储外部URL的数组)。

这对一些人来说可能是显而易见的,但即使是PhoneGap似乎也没有很好的记录(或者至少我没有在疯狂的谷歌搜索中看到)。我研究的维基教程没有提到这一点。

有关详情,请参阅图片。

enter image description here