2016-11-09 44 views
2

現在已經將近6天了,我正嘗試修復cordova-php中的圖片上傳問題,但無法解決它。我嘗試了Google和Stack Overflow的多種解決方案。但是他們都沒有爲我工作。

我使用下面的代碼作爲前端。

<div> 
    <h3>Server URL for upload.php:</h3> 
    <input id="serverUrl" type="text" value="http://sample.com/mobile_app/upload_img.php" /> 
</div> 
<script type="text/javascript" charset="utf-8"> 

    var deviceReady = false; 
    /** 
    * Take picture with camera 
    */ 
    function takePicture() { 
     navigator.camera.getPicture(
      function(uri) { 
       var img = document.getElementById('camera_image'); 
       img.style.visibility = "visible"; 
       img.style.display = "block"; 
       img.src = uri; 
       document.getElementById('camera_status').innerHTML = "Success"; 
      }, 
      function(e) { 
       console.log("Error getting picture: " + e); 
       document.getElementById('camera_status').innerHTML = "Error getting picture."; 
      }, 
      { quality: 50, destinationType: navigator.camera.DestinationType.FILE_URI}); 
    }; 
    /** 
    * Select picture from library 
    */ 
    function selectPicture() { 
     navigator.camera.getPicture(
      function(uri) { 
       var img = document.getElementById('camera_image'); 
       img.style.visibility = "visible"; 
       img.style.display = "block"; 
       img.src = uri; 
       document.getElementById('camera_status').innerHTML = "Success"; 
      }, 
      function(e) { 
       console.log("Error getting picture: " + e); 
       document.getElementById('camera_status').innerHTML = "Error getting picture."; 
      }, 
      { quality: 50, destinationType: navigator.camera.DestinationType.FILE_URI, sourceType: navigator.camera.PictureSourceType.PHOTOLIBRARY}); 
    }; 

    /** 
    * Upload current picture 
    */ 
    function uploadPicture() { 

     // Get URI of picture to upload 
     var img = document.getElementById('camera_image'); 
     var imageURI = img.src; 
     if (!imageURI || (img.style.display == "none")) { 
      document.getElementById('camera_status').innerHTML = "Take picture or select picture from library first."; 
      return; 
     } 

     // Verify server has been entered 
     server = document.getElementById('serverUrl').value; 
     if (server) { 

      // Specify transfer options 
      var options = new FileUploadOptions(); 
      options.fileKey="fileUpload"; 
      options.httpMethod="POST"; 
      options.fileName=imageURI.substr(imageURI.lastIndexOf('/')+1); 
      options.mimeType="image/jpeg"; 
      options.chunkedMode = false; 
    //   var op; 
//op = new FileUploadOptions(); 

      options.headers = { 
       Connection: "close" 
      }; 
      // Transfer picture to server 
      var ft = new FileTransfer(); 
      ft.upload(imageURI, server, function(r) { 
       document.getElementById('camera_status').innerHTML = "Upload successful: "+r.response+" bytes uploaded."; alert(r.response);    
      }, function(error) { 
       alert(r.response); 
       document.getElementById('camera_status').innerHTML = "Upload failed: Code = "+error.code;    
      }, options); 
     } 
    } 
    /** 
    * View pictures uploaded to the server 
    */ 
    function viewUploadedPictures() { 

     // Get server URL 
     server = document.getElementById('serverUrl').value; 
     if (server) { 

      // Get HTML that lists all pictures on server using XHR 
      var xmlhttp = new XMLHttpRequest(); 
      // Callback function when XMLHttpRequest is ready 
      xmlhttp.onreadystatechange=function(){ 
       if(xmlhttp.readyState === 4){ 
        // HTML is returned, which has pictures to display 
        if (xmlhttp.status === 200) { 
         document.getElementById('server_images').innerHTML = xmlhttp.responseText; 
        } 
        // If error 
        else { 
         document.getElementById('server_images').innerHTML = "Error retrieving pictures from server."; 
        } 
       } 
      }; 
      xmlhttp.open("GET", server , true); 
      xmlhttp.send();   
     } 
    } 

    /** 
    * Function called when page has finished loading. 
    */ 
    function init() { 
     document.addEventListener("deviceready", function() {deviceReady = true;}, false); 
     window.setTimeout(function() { 
      if (!deviceReady) { 
       alert("Error: PhoneGap did not initialize. Demo will not run correctly."); 
      } 
     },2000); 
    } 
    </script> 

這裏是後端(PHP)代碼。

<?php 
header("Access-Control-Allow-Origin: *"); 
//header("Access-Control-Allow-Methods: GET, POST, PUT, OPTIONS"); 
header("content-type: image/png"); 
// Directory where uploaded images are saved 
$dirname = "user_img";//"mobile_app/user_img"; 
var_dump($_POST); 
$new_image_name = urldecode($_FILES["fileUpload"]["name"]).".png"; 
// If uploading file 
//echo $_FILES; 
echo $new_image_name; 
print_r($_FILES["fileUpload"]); 
if ($_FILES) { 
    print_r($_FILES); 
    //mkdir ($dirname, 0777, true); 
    move_uploaded_file($_FILES["fileUpload"]["tmp_name"],$dirname."/".$_FILES["fileUpload"]["name"]); 
} 
// If retrieving an image 
else if (isset($_GET['image'])) { 
    $file = $dirname."/".$_GET['image']; 
    // Specify as jpeg 
    header('Content-type: image/jpeg'); 

    // Resize image for mobile 
    list($width, $height) = getimagesize($file); 
    $newWidth = 120.0; 
    $size = $newWidth/$width; 
    $newHeight = $height * $size; 
    $resizedImage = imagecreatetruecolor($newWidth, $newHeight); 
    $image = imagecreatefromjpeg($file); 
    imagecopyresampled($resizedImage, $image, 0, 0, 0, 0, $newWidth, $newHeight, $width, $height); 
    imagejpeg($resizedImage, null, 80); 
} 
// If displaying images 
else { 
    $baseURI = "http://".$_SERVER['SERVER_NAME'].':'.$_SERVER['SERVER_PORT'].$_SERVER['REQUEST_URI']; 
    $images = scandir($dirname); 
    $ignore = Array(".", ".."); 
    if ($images) { 
     foreach($images as $curimg){ 
      if (!in_array($curimg, $ignore)) { 
       echo "Image: ".$curimg."<br>"; 
       echo "<img src='".$baseURI."?image=".$curimg."&rnd=".uniqid()."'><br>"; 
      } 
     } 
    } 
    else { 
     echo "No images on server"; 
    } 
} 
?> 

我發現$_FILES是空的我得到Array()only。我不知道代碼有什麼問題,因爲我在多個問題和示例中看到了相同的代碼。

我使用了兩臺Web服務器,但結果相同。

user_img文件夾有777個訪問權限。

+0

什麼是**請求**內容類型? ('var_dump($ _ SERVER ['HTTP_CONTENT_TYPE']);') –

+0

我得到NULL。我添加標題(「content-type:image/jpeg」);在標題中但它仍然爲空。 – Ironic

回答

1

終於在7天后我解決了這個問題。其實我很愚蠢。你會笑我。

我給出的網址是http://sample.com/upload_img.php我只需要在url中添加www。所以,工作網址是http://www/sample.com/upload_img.php。 它解決了這個問題。

我希望別人能從中獲得幫助。

+0

這是[您的答案在此複製](https://stackoverflow.com/a/40560981/472495)。 – halfer