Ajax envía y guarda la imagen codificada de Base64 en el servidor

Estoy pasando una URL base64 a través de jquery ajax y quiero guardar en el servidor. Pero el código a continuación me está dando un archivo vacío. Intenté escribir la cadena decodificada y crear una imagen de la cadena, pero con ambas variables, se escribieron 0 mordiscos. Cuando pruebo el valor que se está trabajando en el resultado [objeto FileReader] …… creo que o me falta un paso o estoy cometiendo un error en algún lugar.

¿También hay una manera de convertir la imagen a un objeto de tipo $ _FILE? razón por la cual es id como usar una función de wordpress para guardar el archivo si es posible.

Código Php:

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 as $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'); 

código de muestra de jQuery

 jQuery(document).on('change', '.imageup', function(event){ errors= []; errnum=0; numberofimages=jQuery("#selectedimages > div").length; //get number of images if(numberofimages1) {// if a multiple file upload var images = new FormData(); images.append('action', 'uploadimg'); //wordpress specific jQuery.each(event.target.files, function(key, value ){ var size= value.size; var extension= value.name.substring(value.name.lastIndexOf('.') + 1).toLowerCase(); var allowedExtensions = ['png', 'jpg', 'jpeg', 'gif']; if( allowedExtensions.indexOf(extension) !== -1 ) { if(numberofimages height) { if (width > MAX_WIDTH) { height *= MAX_WIDTH / width; width = MAX_WIDTH; } } else { if (height > MAX_HEIGHT) { width *= MAX_HEIGHT / height; height = MAX_HEIGHT; } } var canvas = document.createElement("canvas"); canvas.width = width; canvas.height = height; canvas.getContext("2d").drawImage(this, 0, 0, width, height); this.src = canvas.toDataURL('image/png'); } // end on load function img.src = e.target.result; } //end filereader function fileReader.readAsDataURL(file); console.log(fileReader); images.append(key, fileReader); numberofimages++; } else { errnum++; errors[errnum]= value=' is a illegal file type'; } } }); //image holder finished, remove jQuery('#'+id).remove(); jQuery.ajax({ url: '/wp-admin/admin-ajax.php', type: 'POST', data: images, cache: false, processData: false, contentType: false, success: function(data) { console.log(data); }//end of success function }); 

ok gracias a PaulS por apuntarme en la dirección correcta … actualizado jQuery a continuación …….. la parte superior de php no funcionará con esto (estoy cortando el ajax a pesar de que he incluido una nota a continuación para mostrar donde va) la matriz es diferente ya que agregué el nombre del archivo y la url de base64.

jsfiddle http://jsfiddle.net/dheffernan/6Ut59/

Básicamente, el flujo es 1. Comprueba los archivos máx. Permitidos 2 y luego, para cada comprobación de archivos, no se supera.
3 Llame al lector de archivos, cuando se cargue, llame a resizeBase64img (gracias a la persona que lo envió) 4. si está en el último archivo procesado – envíe FormData a través de Ajax 5.Cuando el archivo devuelve entrada, div para mostrar la imagen

 function resizeBase64Img(base64, width, height) { var canvas = document.createElement("canvas"); canvas.width = width; canvas.height = height; var context = canvas.getContext("2d"); var deferred = $.Deferred(); $("").attr("src", base64).load(function() { context.scale(width/this.width, height/this.height); context.drawImage(this, 0, 0); deferred.resolve($("").attr("src", canvas.toDataURL('image/jpg'))); }); return 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); } return 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 some images if you wish to change them"); return; } else if (imagecount == maximages) { var full=true; jQuery('.imageup').remove(); jQuery('#imageinput').html('
Image Quota Full: delete images to change them
'); } //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 TO RUN HERE SUBMITTING IMAGES (THE FORMDATA) EG jQuery.ajax({ url: '/wp-admin/admin-ajax.php', type: 'POST', data: images, cache: false, processData: false, contentType: false, success: function(data) { console.log(data); } }); } $('#imagesholder').append('
'+'
'+name.name+'
'); i++; if(full === true) { jQuery('.image-box-full').show(); } }); });//end when });//end each jQuery(this).val(''); });//end on change