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';
?>
答
所以,你只是想知道如何将标题添加到data
要通过Ajax发布?
这比你已经做的更容易!
如果你已经做到了...
方法如下:
data: {"title:":$("input[name='title']").val(),"image":resp}
你会得到关于PHP端使用$_POST['title']
称号。
我做了一个CodePen demo,很明显,Ajax被注释掉了......
但是将要发送的数据显示在控制台中。
“_but it is working_”这不够,你必须详细描述问题的具体内容。阅读[如何在*上提出问题](http://*.com/help/how-to-ask)以了解如何相应地改进您的问题。 –
好的........... –
那么读取字段值并将其添加到您使用AJAX请求发送的'data'对象... – CBroe