PHP - 使用croppie插件上傳之前的jquery ajax裁剪圖像

我已經編寫了使用PHP，jQuery和Ajax和Croppie插件裁剪圖像的代碼。PHP - 使用croppie插件上傳之前的jquery ajax裁剪圖像

我也試圖添加輸入值。
但我不知道如何使用PHP發佈輸入值與Ajax。
我的意思是說，當我是一個上傳圖像時，我想要輸入的值也與圖像一起發佈。

請與下面的代碼檢查供大家參考： -

$uploadCrop = $('#upload-demo').croppie({ 
 
    enableExif: true, 
 
    viewport: { 
 
    width: 853, 
 
    height: 292, 
 
    type: '' 
 
    }, 
 
    boundary: { 
 
    width: 853, 
 
    height: 292 
 
    } 
 
}); 
 

 
$('#upload').on('change', function() { 
 
    var reader = new FileReader(); 
 
    reader.onload = function (e) { 
 
    $uploadCrop.croppie('bind', { 
 
     url: e.target.result 
 
    }).then(function(){ 
 
     console.log('jQuery bind complete'); 
 
    }); 
 

 
    } 
 
    reader.readAsDataURL(this.files[0]); 
 
}); 
 

 
$('.upload-result').on('click', function (ev) { 
 
    $uploadCrop.croppie('result', { 
 
    type: 'canvas', 
 
    size: 'viewport' 
 
    }).then(function (resp) { 
 

 
    $.ajax({ 
 
     url: "upload.php", 
 
     type: "POST", 
 
     data: {"image":resp}, 
 
     success: function (data) { 
 
     html = '<img src="' + resp + '" />'; 
 
     $("#upload-demo-i").html(html); 
 
     } 
 
    }); 
 
    }); 
 
});

<script src="http://demo.itsolutionstuff.com/plugin/jquery.js"></script> 
 
<script src="http://demo.itsolutionstuff.com/plugin/croppie.js"></script> 
 
<link rel="stylesheet" href="http://demo.itsolutionstuff.com/plugin/bootstrap-3.min.css"> 
 
<link rel="stylesheet" href="http://demo.itsolutionstuff.com/plugin/croppie.css"> 
 

 
<div class="row"> 
 
    <div class="col-md-4 text-center"> 
 
<div id="upload-demo" style="width:350px"></div> 
 
    </div> 
 
</div> 
 
<!--<div class="row"> 
 
<div class="col-md-4" style=""> 
 
<div id="upload-demo-i" style="background:#e1e1e1;width:300px;padding:30px;height:300px;margin-top:30px"></div> 
 
</div> 
 
</div>--> 
 
<div class="row"> 
 
    <div class="col-md-4" style="padding-top:30px;"> 
 
<strong>Select Image:</strong> 
 
<br/> 
 
<input type="file" id="upload"> 
 
<br/> 
 
<input type="text" name="title"> 
 
<button class="btn btn-success upload-result">Upload Image</button> 
 
    </div> 
 
</div>

upload.php的

<?php 
$data = $_POST['image']; 

list($type, $data) = explode(';', $data); 
list(, $data)  = explode(',', $data); 

$data = base64_decode($data); 
$imageName = time().'.jpg'; 
file_put_contents('upload/'.$imageName, $data); 

echo 'done'; 

?>

來源

2017-05-27 Harshad Patil

「_but it is working_」這不夠，你必須詳細描述問題的具體內容。閱讀[如何在StackOverflow上提出問題]（http://stackoverflow.com/help/how-to-ask）以瞭解如何相應地改進您的問題。 –

好的........... –

那麼讀取字段值並將其添加到您使用AJAX請求發送的'data'對象... – CBroe

所以，你只是想知道如何將標題添加到data要通過Ajax發佈？

這比你已經做的更容易！
如果你已經做到了...

方法如下：

data: {"title:":$("input[name='title']").val(),"image":resp}

你會得到關於PHP端使用$_POST['title']稱號。

我做了一個CodePen demo，很明顯，Ajax被註釋掉了......
但是將要發送的數據顯示在控制檯中。

來源

2017-05-27 23:04:34

PHP - 使用croppie插件上傳之前的jquery ajax裁剪圖像

回答

相關問題