Блог

Я работаю над плагином WordPress для регистрации (когда вы нажимаете на кнопку check в этом открытом модальном окне, и вы отправляете свое местоположение и комментарий через ajax, затем я сохраняю эти данные в базе данных). Теперь мне нужно создать в том же модальном поле для загрузки файла также с помощью ajax.Я попытался отправить новый объект формы, но я не могу ввести действие (для WordPress wp_ajax_acion), и я не получаю файл на обратной стороне и. Пожалуйста, помогите мне, если у вас есть опыт работы с загрузкой изображений ajax из внешнего интерфейса WordPress.я пробовал с 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()
            {
            }
       });
})`
 

на стороне сервера я выполнил простую печать массива $ _REQUEST, но в качестве ответа получаю 0. Это код:

     <?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();
}
?>
 

у меня это работает с установкой wp: приведенный ниже пример представляет собой загрузку нескольких изображений. Но, честно говоря, я отказался от ajax из-за времени, затраченного на запрос. Он изменяет размер изображения перед загрузкой.

интерфейс

 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')));               
});
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('<div class="image-box-full">Image Quota Full: delete images to change 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 TO 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 change
 

сервер:

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