2016-09-21 165 views
0

我正在做一個AJAX彈出窗口上傳圖像到文件系統。圖像上傳過程具有以下步驟。如何檢索圖像BLOB從PHP中的jQuery的AJAX的formData

  1. 選擇文件並將其裁剪爲所需的大小。
  2. 結果圖像顯示在<img>標籤src中作爲Base64代碼。
  3. 轉換的Base64到BLOB通過AJAX發送

這裏是代碼...

$(document).ready(function(){ 
     $('#btn_save').on('click', function() { 
      var PaymentStatus = $("#PaymentStatus").val(); 
      var image = $('#image-id').val(); 

      var base64ImageContent = image.replace(/^data:image\/(png|jpg);base64,/, ""); 
      var blob = base64ToBlob(base64ImageContent, 'image/png'); 
      var formData = new FormData(); 
      formData.append('picture', blob); 
      formData.append('PaymentStatus', PaymentStatus); 
      $.ajax({ 
        data: formData, 
        url:"/login/advshop/add", 
        method: 'GET', 
        processData: false, 
        contentType: false, 
        success: function (result) { 
         alert("form submitted"); 
       }, 
       error: function (result) { 
         alert('error'); 
         //alert(result); 
       } 
     }); 
    }); 
}); 

,但我不能讓我的控制器的數據..

public function add() { 
    print_r($_POST['picture']); 
} 

and the error message is ..

消息:未定義指數:圖片

+0

我想你必須**用戶**方法:'POST'**而不是**方法:'GET'**如在控制器中試圖從POST請求中獲取數據 –

+0

對不起,這只是一種打字error..i在你的ajax調用之前使用POST方法 –

+0

請放一個'console.log(formData);'並讓我們知道它說什麼 –

回答

1

請參閱我的回答..

 $(document).ready(function() { 


     $('#btn_save').on('click', function() { 
      var image = $('#image-id').val(); 
      var base64ImageContent = image.replace(/^data:image\/(png|jpg);base64,/, ""); 
      var PaymentStatus = $("#PaymentStatus").val(); 
      var formData = new FormData(); 
      formData.append('image', base64ImageContent); 
      formData.append('PaymentStatus', PaymentStatus); 



      $.ajax({ 
       data: formData, 
       url: "/login/advshop/add", 
       method: 'POST', 
       processData: false, 
       contentType: false, 
       success: function (result) { 
        alert("form submitted"); 
       }, 
       error: function (result) { 
        alert('error'); 
        //alert(result); 

       } 
      }); 
     }); 
    }) 

在控制器。

public function add() { 


     $data = base64_decode($_POST['image']); 


     file_put_contents('images/test.jpg', $data); 
    } 

您可以通過AJAX使用FORMDATA append.decode以base64內容直接傳遞Base64編碼的圖像內容,並把它放在file_put_contents()函數。

0

我認爲這個問題是你要上傳的圖片轉換成的base64字符串,然後你想通過這串控制器通過AJAX ..是它的兄弟..

+0

...我選擇這種方法,因爲通過ajax傳遞base64長字符串不適用。我錯了嗎? –

0

我也面臨這個問題..首先在你的窗體中帶一個隱藏的域,並給隱藏域的id和值作爲隱藏域的值是轉換的字符串。然後你可以很容易地獲得隱藏域的值,即base64字符串到一個變量中js通過getElementById然後將該變量傳遞給控制器​​..您可以通過$ _POST ['hiddenfield'id]訪問該變量。那麼你可以直接通過save()將值存儲到數據庫中。

+0

你可以通過點擊編輯按鈕來重新編輯你的第一個答案,而不是張貼另一個。 – user4419336

+0

在這種情況下..你告訴將base64代碼轉換爲字符串格式,然後傳遞給js..right? –

+0

它的工作rajesh。謝謝!! –

0

是的,沒有必要將base64轉換爲字符串..base64返回字符串,所以你用這個字符串來隱藏字段的值。

+0

你能分享你的代碼嗎?圖片字符串打破我想。 –