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裁剪图像

回答

相关问题