javascript - Send Cropped image to database ajax On client and PHP on server -

i trying upload image database using javascript on client , php on server.

• first image selected gallery.
• after zooming , cropping image passed database

the problem when iam trying submit cropped image value not passed php actual uploaded input "file" value being passed, need cropped areas value passed php.

for testing purpose if js required can provide it.

js: crops image

$(function() {         $('.image-editor').cropit({           exportzoom: 1.25,           imagebackground: true,           imagebackgroundborderwidth: 40,      });      $('.export').click(function() {       var imagedata = $('.image-editor').cropit('export');       window.open(imagedata);     });   }); 

html:

 <form id="uploadform" class="image-editor">       <input type="file" class="cropit-image-input">       <!-- .cropit-image-preview-container needed background image work -->       <div class="cropit-image-preview-container">         <div class="cropit-image-preview"></div>       </div>       <div class="image-size-label">         resize image       </div>       <input type="range" class="cropit-image-zoom-input">       <input type="submit" class="export">export</input >     </form> 

ajax: ajax sends data php

$(document).ready(function (e) {      $("#uploadform").on('submit', (function (e) {         e.preventdefault();         $.ajax({             url: "upload.php",             type: "post",             data: new formdata(this),             contenttype: false,             cache: false,             processdata: false,             success: function (data) {                 $("#targetlayer1").html(data);             },             error: function () {}         });     }); }); 

php:

 if(count($_files) > 0) {         if(is_uploaded_file($_files['userimage']['tmp_name'])) {            $mysl = mysqli_connect("localhost", "root", "root","test");              $imgdata =addslashes(file_get_contents($_files['userimage']['tmp_name']));             $imageproperties = getimagesize($_files['userimage']['tmp_name']);              $sql = "update output_images set imagetype  ='{$imageproperties['mime']}',imagedata= '{$imgdata}' imageid='16'";             $current_id = mysqli_query($mysl,  $sql) or die("<b>error:</b> problem on image insert<br/>" . mysqli_error());;             if(isset($current_id)) {                 echo "done";             }         }         } 

first, take @ this: can pass image form data php function upload?

i think issue here: var imagedata = $('.image-editor').cropit('export');. since new image never part of form, there no way pass via ajax. in js/jquery, advise:

var imagedata = ''; $(function() {     $('.image-editor').cropit({         exportzoom: 1.25,         imagebackground: true,         imagebackgroundborderwidth: 40,     });      $('.export').click(function() {         imagedata = $('.image-editor').cropit('export');         window.open(imagedata);     }); }); $(document).ready(function (e) {     $("#uploadform").on('submit', (function (e) {         e.preventdefault();         var fd = new formdata(this);         fd.append( imagedata, file );         $.ajax({             url: "upload.php",             type: "post",             data: fd,             contenttype: false,             cache: false,             processdata: false,             success: function (data) {                 $("#targetlayer1").html(data);             },             error: function () {}         });     }); }); 

edit

in example, never defined name or id attribute input, there no way php index $_files global. try $_files[0]. advise assigning in form or when post it.

you can adjust myformdata.append(name, file, filename);. be:

fd.append('crop-image', imagedata, 'crop-image.jpg'); 

then in php, call using $_files['crop-image']. if want pass file name form:

$(document).ready(function (e) {     $("#uploadform").on('submit', (function (e) {         e.preventdefault();         var fd = new formdata(this);         var origfilename = $("input[type='file']").val();         var startindex = (origfilename.indexof('\\') >= 0 ? origfilename.lastindexof('\\') : origfilename.lastindexof('/'));         var filename = origfilename.substring(startindex);         if (filename.indexof('\\') === 0 || filename.indexof('/') === 0){             filename = filename.substring(1);         }         var cropfilename = "crop-" + filename;         fd.append('crop-image' imagedata, cropfilename );         $.ajax({             url: "upload.php",             type: "post",             data: fd,             contenttype: false,             cache: false,             processdata: false,             success: function (data) {                 $("#targetlayer1").html(data);             },             error: function () {}         });     });