mercredi 25 mars 2015

integrating a photo crop plugin to work with php post

so I've followed this code http://ift.tt/1IxqspF to make a photo cropping plugin that allows dropped files and looks exactly how I want it. the only problem is that when I select a photo and crop it to what I want, I don't know how to get that cropped photo to post to a photo upload php I have that works well. Before I had this plugin I just used a basic multipart/form with post method like this:



<form action="upload prof.php" method="post" enctype="multipart/form-data">
Select image to upload:<br />
<b>Make sure it is already square or it will be warped</b><br /><br />
<input type="file" name="fileToUpload" id="fileToUpload" accept="image/*"><br /><br />
<input type="submit" value="Upload Image" name="submit">
</form>


and that work for a while but now instead of just stretching the photo when it is displayed later, I want it to be cropped as a square that the user cropped. I have this part as the new picture upload section from the link above:



<div class="container">
<div class="image-uploader" data-base-height="250" data-base-width="250" style="width: 250px; height: 250px;" >
<div class="image" style="width: 250px; height: 250px;" >
<label>Click or drag a file to change your image</label>
<img />
</div>
<input id="uploader" type="file" />
<div class="zoom" style="display: none;">
<div class="plus"></div>
<div class="minus"></div>
<div class="close"></div>
</div>
</div>
</div>


My question is how would I even attempt at goin at this to get it to upload the cropped photo to the upload prof.php from the original form. It would be nice if it worked the exact same as the original for in that the same data is sent.


also I figured out that this is a good way to get the file to a var:



<script>
$("#uploader").on('change', function(event) {
var file = event.target.files[0];
});
</script>


Thanks for the help if you can figure this out. I've been stuck on this for quite a while now.


Aucun commentaire:

Enregistrer un commentaire