web-dev-qa-db-ger.com

WordPress AJAX Dateiupload - FrontEnd

Also habe ich jedes WordPress-Front-End-Tutorial zum Hochladen von AJAX-Dateien durchgelesen, das ich gut kann. Im Moment arbeitet nichts für mich. Das, was mir am meisten Sinn macht, ist dieses: http://theaveragedev.com/wordpress-files-ajax/

Hier ist mein Code:

In meiner Vorlagendatei example.php

<script>var ajax_url = "<?php echo admin_url('admin-ajax.php'); ?>"</script>
<form id="file_form">
    <?php wp_nonce_field('ajax_file_nonce', 'security'); ?>
    <input type="hidden" name="action" value="my_file_upload">
    <label for="file_upload">It's a file upload...</label>
    <input type="file" name="file_upload">
    <input type="submit" value="Go">
</form>

Dies ist in ajax-file-upload.js

jQuery(document).ready(function(){
    var form_data = {};
    $(this).find('input').each(function(){
        form_data[this.name] = $(this).val();
    });
    $('#file_form').ajaxForm({
        url: ajax_url, // there on the admin side, do-it-yourself on the front-end
        data: form_data,
        type: 'POST',
        contentType: 'json',
        success: function(response){
            alert(response.message);
        }
    });
});

Das steht in meiner functions.php

function q_scripts(){
    $src = get_template_directory_uri().'/js/ajax-file-upload.js';
    wp_enqueue_script('my_ajax_file_uploader_thing', $src, array('jquery', 'jquery-form'));
}
add_action('init', 'q_scripts');

function handle_file_upload(){
    check_ajax_referer('ajax_file_nonce', 'security');

    if(!(is_array($_POST) && is_array($_FILES) && defined('DOING_AJAX') && DOING_AJAX)){
        return;
    }

    if(!function_exists('wp_handle_upload')){
        require_once(ABSPATH . 'wp-admin/includes/file.php');
    }
    $upload_overrides = array('test_form' => false);

    $response = array();

    foreach($_FILES as $file){
        $file_info = wp_handle_upload($file, $upload_overrides);

        // do something with the file info...
        $response['message'] = 'Done!';
    }

    echo json_encode($response);
    die();
}

add_action('wp_ajax_my_file_upload', 'handle_file_upload');

Ich habe versucht, den Enctype zum Formularelement hinzuzufügen, aber das hat nicht funktioniert. Der Fehler, den ich immer wieder erhalte, ist eine Warnung, die "undefiniert" sagt. Weiß jemand, wie ich dieses Problem beheben kann?

EDIT

Das 'undefinierte' Problem ist jetzt behoben, da ich die js-Datei so bearbeitet habe, dass sie ein Klickereignis enthält, und den Selektor für die Formulareingabeschleife geändert habe:

jQuery(document).ready(function($){
    $('#file_form :submit').click(function() {
        var form_data = {};
        $('#file_form').find('input').each(function () {
            form_data[this.name] = $(this).val();
        });
        console.log(form_data);
        $('#file_form').ajaxForm({
            url: ajax_url, // there on the admin side, do-it-yourself on the front-end
            data: form_data,
            type: 'POST',
            contentType: 'json',
            success: function (response) {
                alert(response.message);
            },
            error: function (response) {
                console.log('error');
            }
        });
        return false;
    });
});

Die Dateien werden immer noch nicht in den Medienordner hochgeladen. Ich möchte auch die hochgeladene URL zurückbekommen, sobald sie hochgeladen wurde.

Ich schreibe das Dateiobjekt in die Konsole, damit ich sehen kann, was passiert. Hier ist ein Beispiel dafür:

Object {security: "e6db2a6eee", _wp_http_referer: "/chat?sessionappid=138", action: "my_file_upload", file_upload: "C:\fakepath\download.jpg", "": "Go"}

Ist etwas falsch daran und wird es deshalb nicht hochgeladen?

3
DL1984

Hallo, Sie haben diesen Code für das WordPress-Frontend AJAX verwendet. Tutorial-Code zum Hochladen von Dateien Hier ist mein Code:

In meiner Vorlagendatei example.php

<form enctype="multipart/form-data">
   <input type="text" name="support_title" class="support-title">
   <input type="file" id="sortpicture" name="upload">
   <input class="save-support" name="save_support" type="button" value="Save">
 </form>

Dies ist in ajax-file-upload.js

      jQuery(document).on('click', '.save-support', function (e) {

                        var supporttitle = jQuery('.support-title').val();

                        var querytype = jQuery('.support-query').val();
                        var file_data = jQuery('#sortpicture').prop('files')[0];

                        var form_data = new FormData();
                        if (supporttitle == '') {
                            jQuery('.support-title').css({"border": "1px solid red"})
                            return false;
                        } else {
                            jQuery('.support-title').css({"border": "1px solid #e3ecf0"})
                        }

                        form_data.append('file', file_data);
                        form_data.append('action', 'md_support_save');
                        form_data.append('supporttitle', supporttitle);

                        jQuery.ajax({
                            url: '<?php echo admin_url('admin-ajax.php'); ?>',
                            type: 'post',
                            contentType: false,
                            processData: false,
                            data: form_data,
                            success: function (response) {
                                jQuery('.Success-div').html("Form Submit Successfully")
                            }  
                            error: function (response) {
                             console.log('error');
                            }

                        });
                    });

                });

Dieser iS functions.php Code

  add_action( 'wp_ajax_md_support_save','md_support_save' );
  add_action( 'wp_ajax_nopriv_md_support_save','md_support_save' );


  public function md_support_save(){
       $support_title = !empty($_POST['supporttitle']) ? 
       $_POST['supporttitle'] : 'Support Title';

        if (!function_exists('wp_handle_upload')) {
           require_once(ABSPATH . 'wp-admin/includes/file.php');
       }
      // echo $_FILES["upload"]["name"];
      $uploadedfile = $_FILES['file'];
      $upload_overrides = array('test_form' => false);
      $movefile = wp_handle_upload($uploadedfile, $upload_overrides);

    // echo $movefile['url'];
      if ($movefile && !isset($movefile['error'])) {
         echo "File Upload Successfully";
    } else {
        /**
         * Error generated by _wp_handle_upload()
         * @see _wp_handle_upload() in wp-admin/includes/file.php
         */
        echo $movefile['error'];
    }
    die();
 }
4
Adnan Limdiwala

alle codes für function.php


if (!empty($_POST) || (!empty($_FILES))) {
    require_once (ABSPATH . '/wp-admin/includes/file.php');
    require_once (ABSPATH . '/wp-admin/includes/image.php');
    global $wpdb;
    if (isset($_POST['submit'])) {
        // Upload Exhibitor Logo
        $file = $_FILES['uploaded_doc'];
        if (!empty($file)) {
            $uploads = wp_upload_dir();
            // Create 'user_avatar' directory if not exist
            $folderPath = ABSPATH . 'wp-content/uploads/Reports';
            if (!file_exists($folderPath)) {
                mkdir($folderPath, 0777, true);
            }

                 $ext = end((explode(".", $_FILES['uploaded_doc']['name'])));            
                if( $ext== 'pdf' || $ext== 'docx' ){                    
                $ABSPATH_userAvatarFullImage = ABSPATH . 'wp-content/uploads/Reports/' . time() . '.' . $ext;
                if (move_uploaded_file($_FILES['uploaded_doc']['tmp_name'], $ABSPATH_userAvatarFullImage)) {                        
                    $data = array(
                    'title' => $_POST['title'],
                    'arabic_title' => $_POST['arabic_title'],
                    'principle_investigators' => $_POST['principle_investigators'],
                    'co_investgators' => $_POST['co_investgators'],
                    'coverage_area' => $_POST['coverage_area'],
                    'publication_year' => $_POST['publication_year'],
                    'types' => $_POST['types'],
                    'uploaded_doc' => $_FILES['uploaded_doc']['name'],
                    'create_date'=> date('Y-m-d H:i:s') 

                    );          
        $table = $wpdb->prefix . "reports_publication";         
        $result = $wpdb->insert($table, $data);

                }
                echo "1";
                }else{
                    echo "File not in format";
                }

        }


}
}

}

0
Rakesh Shah

deine Form

Geben Sie Ihre Daten ein ....

                    <div class="form-sec">
                            <form name="signupForm" class="signupForm" method="POST" id="abc"  enctype="multipart/form-data">                           
                        <div class="form-group col-sm-2">
                            <label for="">Title</label>
                        </div>
                        <div class="form-group col-sm-10">
                            <input type="text" class="form-control title"  name="title" placeholder=""/>
                        </div>

                        <div class="form-group col-sm-2">
                            <label for="">Arabic Title </label>
                        </div>
                        <div class="form-group col-sm-10">
                            <input type="text" class="form-control arabic_title"  name="arabic_title" placeholder=""/>
                        </div>

                        <div class="form-group col-sm-2">
                            <label for="">Principle Investigators </label>
                        </div>
                        <div class="form-group col-sm-10">
                            <input type="text" class="form-control principle_investigators"  name="principle_investigators" placeholder=""/>
                        </div>

                        <div class="form-group col-sm-2">
                            <label for="">Co Investigators </label>
                        </div>
                        <div class="form-group col-sm-10">
                            <input type="text" class="form-control co_investgators"  name="co_investgators" placeholder=""/>
                        </div>


                        <div class="form-group col-sm-2">
                            <label for="">Coverage Area</label>
                        </div>
                        <div class="form-group col-sm-10 city">     
                            <select id="Coverage" name="coverage_area"  class="form-control"/>
                                <option value="">Select Coverage Area </option>
                                    <?php
                                        $users = get_users(array(
                                            'role' => 'governorate'
                                        ));
                                        foreach ($users as $user) {
                                            echo '<option value="' . $user->display_name . '">' . esc_html($user->display_name) . '</option>';
                                                }
                                    ?>
                            </select>
                        </div>


                        <div class="form-group col-sm-2">
                            <label for="">Year Of Publication </label>
                        </div>
                        <div class="form-group col-sm-10">
                            <select id="publish" name="publication_year"  class="form-control"/>    
                                <option value="">select year</option>
                                    <?php
                                        for ($i = 1965; $i <= 2050; $i++) {
                                        echo '<option value="' . $i . '">' . $i . '</option>';
                                        }
                                    ?>
                            </select>
                        </div> 

                        <div class="form-group col-sm-2">
                            <label for="">Types</label>
                        </div>
                        <div class="form-group col-sm-10 city">     
                            <select id="types" name="types"  class="form-control"/> 
                                <option value="">select Types</option>
                                <option value="Article">Article</option>
                                <option value="Journal">Journal</option>
                                <option value="Book">Book</option>
                                <option value="Report">Report</option>
                                <option value="Other">Other</option>                                
                            </select>
                        </div>  


                            <div class="fileupload fileupload-new" data-provides="fileupload">
                                <span class="btn btn-primary btn-file">
                                    <span class="fileupload-new">UPLOAD FILE</span>
                                    <input class="uploaded_doc" type="file" name="uploaded_doc"/>
                                </span>                     
                            </div>

                            <input type="hidden" name="action" value="frmreg">


                        <div class="clearfix"></div>
                            <button type="submit" class="btn btn-success" name="submit" value="submit" id="submit1" >SUBMIT</button>
                </form>

                </div>

            </div>
        </div>
    </div>
</div>
                <?php
    }

}
0
Rakesh Shah