So laden Sie Bilder über jQuery/Ajax in WordPress hoch

Lesezeit: 4 Minuten

Benutzer-Avatar
Manisch Negi

Ich versuche, ein Bild aus dem WordPress-Registrierungsformular (benutzerdefiniertes Formular) hochzuladen. Ich habe viele Möglichkeiten gefunden, über Ajax hochzuladen, aber keine davon funktioniert für mich.

Hier ist ein Formular ohne Tag

<div class="lofin-form"><div class="row">                       
<input type="text" name="first_name" id="first_name" placeholder="First Name" class="input" value="" size="20" />
</div>
<div class="row"> 
<lable>Id proof <input type="file" name="id_proof"  id="id_proof" class="input" />
</div>
<p class="submit"><input type="submit" name="wp-submit" id="wp-submit-register" class="btn vernil small" value="'.__('Sign Up','wpestate').'" /></p>
</div>

und hier ist der jQuery-Skriptcode

$('#wp-submit-register').click(function(){
  wpestate_register();
});

function wpestate_register (){
var  user_role =  $('#first_name').val();
var fdata = new FormData();
fdata.append('file', $('#id_proof')[0].files[0]);
$.ajax({
    type: 'POST', 
    url: ajaxurl,
    data: {
        'action' :   'ajax_free_register_form',
        'first_name'  :   first_name,
        'file_data'   : fdata

    },
    success:function(data) {
        alert('success');
    }
}

Und hier ist die PHP-Funktion

add_action( 'wp_ajax_nopriv_ajax_free_register_form', 'ajax_free_register_form' );  
add_action( 'wp_ajax_ajax_free_register_form', 'ajax_free_register_form' );  

function ajax_free_register_form(){
   $first_name  =   trim( $_POST['first_name'] ) ;
   $id_proof   =   $_FILES['id_proof'] ; 
}

BESCHLIESSEN [EDIT]

Fügen Sie einfach das Formular-Tag in das Formular ein und geben Sie eine ID „user_reg_form“ an.

<form id="user_reg_form" action="" method="post" enctype="multipart/form-data">
----------------------input fields goes here-------------------
</form>

Und aktualisieren Sie das Skript:

$('#wp-submit-register').click(function(){
   wpestate_register();
});

function wpestate_register (){
var formdata = new FormData( $("#user_reg_form")[0] );
formdata.append('action', 'ajax_free_register_form');
$.ajax({
   type: 'POST', 
   cache: false,
   contentType: false,
   processData: false,
   url: ajaxurl,
   data: formdata,
   success:function(data) {
      alert('success');
   }
});
}

Danach können Sie die hochgeladene Datei einfach mit abrufen

$attachment = $_FILES['id_proof'];

Stellen Sie sicher, dass Ihre Ajax-Version dies unterstützt. Und Sie müssen ajax processData und contentType auf FALSE setzen. Para contentType bedeutet, dass der Content-Type HEAD nicht gesetzt wird, und processData bedeutet, dass die Daten nicht in Zeichenfolgen verarbeitet werden.

Versuche dies:

$.ajax({
    type: 'POST', 
    url: ajaxurl,
    data: fdata,
    processData : false,
    contentType: false,
    success:function(data) {
        alert('success');
    }
}

  • Ich habe das gemacht, aber kein Glück 🙁

    – Manisch Negi

    15. Juni 2017 um 9:21 Uhr

Laden Sie ein Bild über jQuery/Ajax in WordPress hoch

HTML:

    <input type="file" id="ct-file" name="ct_file">

JS:

    var sofg_mixup = jQuery.noConflict();
    sofg_mixup(document).ready(function() {
        sofg_mixup('#ct-file').change(function() {
            var fileInput = sofg_mixup('#ct-file').prop('files')[0];
            var myFormData = new FormData();
            myFormData.append('ct_file', fileInput);
            sofg_mixup.ajax({
                url: '<?php echo get_template_directory_uri() ?>/save_file.php',
                type: 'POST',
                processData: false, // important
                contentType: false, // important
                dataType: 'json',
                data: myFormData,
                success: function(jsonData) {
                    console.log(jsonData.url);
                },
                error: function(xhr, ajaxOptions, thrownError) {
                    console.log(xhr);
                }
            });
        });
    });

PHP

require_once('../../../../../wp-load.php');
if (isset($_FILES['ct_file'] ) && !empty($_FILES['ct_file']['name']) )
        {
            $allowedExts = array("doc", "docx", "pdf");
            $temp = explode(".", $_FILES["ct_file"]["name"]);
            $extension = end($temp);
            if ( in_array($extension, $allowedExts))
            {
                if ( ($_FILES["ct_file"]["error"] > 0) && ($_FILES['ct_file']['size'] <= 3145728 ))
                {
                    $response = array(
                        "status" => 'error',
                        "message" => 'ERROR Return Code: '. $_FILES["ct_file"]["error"],
                        );
                }
                else
                {
                    $uploadedfile = $_FILES['ct_file'];
                    $upload_name = $_FILES['ct_file']['name'];
                    $uploads = wp_upload_dir();
                    $filepath = $uploads['path']."/$upload_name";

                    if ( ! function_exists( 'wp_handle_upload' ) )
                    {
                        require_once( ABSPATH . 'wp-admin/includes/file.php' );
                    }
                    require_once( ABSPATH . 'wp-admin/includes/image.php' );
                    $upload_overrides = array( 'test_form' => false );
                    $movefile = wp_handle_upload( $uploadedfile, $upload_overrides );
                    if ( $movefile && !isset( $movefile['error'] )  ) {

                        $file = $movefile['file'];
                        $url = $movefile['url'];
                        $type = $movefile['type'];

                        $attachment = array(
                            'post_mime_type' => $type ,
                            'post_title' => $upload_name,
                            'post_content' => 'File '.$upload_name,
                            'post_status' => 'inherit'
                            );

                        $attach_id=wp_insert_attachment( $attachment, $file, 0);
                        $attach_data = wp_generate_attachment_metadata( $attach_id, $file );
                        wp_update_attachment_metadata( $attach_id, $attach_data );

                    }

                    $response = array(
                        "status" => 'success',
                        "url" => $url
                        );

                }
            }
            else
            {
                $response = array(
                    "status" => 'error',
                    "message" => 'something went wrong, most likely file is to large for upload. check upload_max_filesize, post_max_size and memory_limit in you php.ini',
                    );
            }
        }
        print json_encode($response);
        exit;

  • Ich verwende Ajax mit ‘Action’. Können Sie mir bitte sagen, wo ich “Aktion” hinzufügen soll?

    – Manisch Negi

    15. Juni 2017 um 9:20 Uhr

  • Aktion zur Datei: save_file.php 🙂

    – enqtran

    15. Juni 2017 um 9:23 Uhr

  • Wenn Sie sehen werden, dass ich die WordPress-Ajax-Funktion verwende

    – Manisch Negi

    15. Juni 2017 um 9:56 Uhr

  • Aktion zu Daten hinzufügen: myFormData.append(“action”, “ajax_free_register_form”). Die Funktion ajax_free_register_form() enthält PHP-Code

    – enqtran

    16. Juni 2017 um 1:52 Uhr

Verwenden Sie das JQuery-Plugin ajaxForm(). Es wird wie ein Zauber für Sie funktionieren. Bezug http://malsup.com/jquery/form/#getting-started

Verweisen Sie darauf https://forum.jquery.com/topic/using-ajaxsubmit-function-extra-parameter zu

1226820cookie-checkSo laden Sie Bilder über jQuery/Ajax in WordPress hoch

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy