javascript - How to upload image on wordpress front-end via ajax -

javascript - How to upload image on wordpress front-end via ajax -

i working on wordpress plugin check in(when click on button check in open modal window, , submit location , comment via ajax, save info database). need create on same modal field upload file ajax.i have tried send new form object, cant inject action(for wordpress wp_ajax_acion), , don't receive file on and. please help me if have experience ajax upload image wordpress front end end. have tried js:

`jquery(document).on('change','#cc_slika', function(e){ var slic = jquery('#cc_slika').val(); var slicica = jquery('#upload-image-form'); var forma = new formdata(slicica); forma.append('slika', slic); e.preventdefault(); jquery.ajax({ url: mysecondajax.ajaxurl, type: "post", data:{ action:'cc_upload_images', form: forma, }, contenttype: false, cache: false, processdata:false, success: function(data) { alert(data); //jquery("#targetlayer").html(data); }, error: function() { } }); })`

on server side have done simple print of $_request array, 0 response. code:

<?php add_action('wp_ajax_cc_upload_images', 'cc_upload_image'); function cc_upload_image(){ //$slika = file_get_contents('php://input'); //$slika1 = serialize($slika); //$upload_overrides = array( 'test_form' => false ); //$premestanje_slike = wp_handle_upload( $slika, $overrides); // $slicica = $premestanje_slike['url']; //$bla = array('answer' => $slika); print_r($_request); exit(); } ?>

i have working wp install: illustration below multi image upload. honest did away ajax due time involved request. resizes image before upload.

frontend

function resizebase64img(base64, width, height) { var canvas = document.createelement("canvas"); canvas.width = width; canvas.height = height; var context = canvas.getcontext("2d"); var deferred = $.deferred(); $("<img/>").attr("src", base64).load(function() { context.scale(width/this.width, height/this.height); context.drawimage(this, 0, 0); deferred.resolve($("<img/>").attr("src", canvas.todataurl('image/jpg'))); }); homecoming deferred.promise(); } function readfile(file) { var reader = new filereader(); var deferred = $.deferred(); reader.onload = function(event) { deferred.resolve(event.target.result); }; reader.onerror = function() { deferred.reject(this); }; if (/^image/.test(file.type)) { reader.readasdataurl(file); } else { reader.readastext(file); } homecoming deferred.promise(); } jquery(document).on('change', '.imageup', function(event){ var maximages=4; var imagecount=jquery("#imagesholder > div").length; var length= this.files.length; var images= new formdata; var processkey=0; var i=1; jquery.each(event.target.files, function(key, value){ // number of images control. imagecount++; if(imagecount > maximages) { var full=true; jquery('.imageup').remove(); jquery('#imageinput').html("image quota full, please delete images if wish alter them"); return; } else if (imagecount == maximages) { var full=true; jquery('.imageup').remove(); jquery('#imageinput').html('<div class="image-box-full">image quota full: delete images alter them</div>'); } //call resize functions var name=value; $.when( readfile(value) ).done(function(value) { resizebase64img(value, 300, 200).done(function(newimg){ images[processkey]=[]; images[processkey]['url']=newimg[0].src; images[processkey]['name']=name.name; processkey++; if(length===processkey) { //----------------insert ajax run here submitting images (the formdata) e.g jquery.ajax({ url: '/wp-admin/admin-ajax.php', type: 'post', action: 'uploadimg', data: images, cache: false, processdata: false, contenttype: false, success: function(data) { console.log(data); } }); } $('#imagesholder').append('<div id="delete'+i+'">'+'<div class="image-box"><div class="box-image"><img src="'+newimg[0].src+'" style="width:50px;"/></div><div class="image-box-text">'+name.name+'</div><input type="image" src="http://testserverdavideec.mx.nf/wp-content/uploads/2014/04/success_close.png" class="deletebutton" id="delete/i'+i+'"/></div> </div>'); i++; if(full === true) { jquery('.image-box-full').show(); } }); });//end when });//end each jquery(this).val(''); });//end on alter

server:

function uploadimg() { $error = false; //if ( ! function_exists( 'wp_handle_upload' ) ) require_once( abspath . 'wp-admin/includes/file.php' ); //$upload_overrides = array( 'test_form' => false ); $images=array(); $a=0; unset ($_post['action']); foreach($_post $basefile){ $upload_dir = wp_upload_dir(); $upload_path = str_replace( '/', directory_separator, $upload_dir['path'] ) . directory_separator; $base64_string = $basefile; echo $basefile; $base64_string = preg_replace( '/data:image\/.*;base64,/', '', $base64_string ); $decoded_string= base64_decode($base64_string); // 0 bytes written in fwrite $source = imagecreatefromstring($decoded_string); // 0 bytes written in fwrite $output_file = $upload_path.'myfilef'.$a.'.jpg'; $images[]=$output_file; $a++; $image = fopen( $output_file, 'wb' ); $bytes=fwrite( $image, $source); echo $bytes; fclose( $image ); } echo json_encode($images); exit; } add_action('wp_ajax_uploadimg', 'uploadimg'); add_action('wp_ajax_nopriv_uploadimg', 'uploadimg');

javascript php jquery ajax wordpress