Téléchargement de fichier WordPress AJAX - FrontEnd

Question

Téléchargement de fichier WordPress AJAX - FrontEnd

5

37293 2015-08-16

J'ai donc lutous lestutoriels detéléchargement defichiers AJAXfront-end WordPress queje peuxbien. Rienne fonctionnepourmoipour lemoment. Celui quime semble leplus logiqueest celui-ci: http://theaveragedev.com/wordpress-files -ajax/

Voicimon code:

Dansmonfichiermodèleexample.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>

Ceciest dans 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);
        }
    });
});

Ceciest dansmonfunctions.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');

J'aiessayé d'ajouter l'enctype à l'élément deformulaireet celan'apasfonctionné. L'erreur queje reçois constammentest une alerte disant «indéfini». Quelqu'un sait-il commentje peux résoudre ceproblème?

Leproblème 'non défini' amaintenant disparu carj'ai édité lefichierjspour avoir un événement de clicet changé le sélecteurpour laboucle d'entrée deformulaire:

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

Lesfichiersne sonttoujourspastéléchargés dans le dossiermultimédia. Je souhaite également récupérer l'URLtéléversée unefois qu'elle a ététéléversée.

J'écris sur la console l'objetfichierpour queje puisse voir ce qui sepasse. En voici unexemple:

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

So I have been reading through every WordPress front-end AJAX file upload tutorial I can fine. Nothing is working for me at the moment. The one that makes the most sense to me is this one: http://theaveragedev.com/wordpress-files-ajax/

Here is my code:

In my template file 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>

This is 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);
        }
    });
});

This is in my 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');

I have tried adding the enctype to the form element and this didn't work. The error I keep getting is an alert saying 'undefined'. Does anyone know how I can correct this issue?

EDIT

The 'undefined' issue has now gone away as I editied the js file to have a click event and changed the selector for the form input loop:

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

The files still aren't being uploaded to the media folder. I also want to get the uploaded URL back once it has uploaded.

I am writing to the console the file object so I can see what is happening. Here is an example of it:

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

Is there something wrong with this and is that why it isn't uploading?

- Il vousmanque leparamètre d'action dans votrejs.https://codex.wordpress.org/AJAX_in_Plugins
  
  You're missing the action parameter in your js. https://codex.wordpress.org/AJAX_in_Plugins
  - 0
  - 2015-08-16
  - shanebp
- Salut Shane (n'êtes-vouspas BuddyPress Shane?).Leparamètre d'actionestpasséen tant que champmasqué dans leformulaire.J'ai décidé d'utiliser une solution différente.J'utilise Simple Ajax Uploadpourtélécharger lesfichiers dans un répertoire différent.
  
  Hi Shane (aren't you BuddyPress Shane?). The action parameter is passed as a hidden field in the form. I've decided to use a different solution. I'm using Simple Ajax Upload to upload the files to a different directory.
  - 0
  - 2015-08-16
  - hootsmctoots84

4 réponses

votes

Adnan Limdiwala · Answer 1 · 2017-04-18

11

2017-04-18

Bonjour,vous avez utilisé ce codepour letutoriel detéléchargement defichiers AJAXfront-end WordPress Code Voicimon code:

Dansmonfichiermodèleexample.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>

Ceciest dans 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');
                            }

                        });
                    });

                });

Ce codeiSfunctions.php

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


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

Hi You have Use this COde For WordPress front-end AJAX file upload tutorial Code Here is my code:

In my template file 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>

This is 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');
                            }

                        });
                    });

                });

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


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

Est-ce une question ou une réponse?Veuillezne paspublier de vidage de code sans aucuneexplication

Is that a question or an answer? Please do not post code dumps without any explanation.
- 0
- 2017-04-18
- fuxia
ok,nous avonsmis àjourmon codeet cetutoriel detéléchargement defichiers AJAXfront-end WordPress

ok we have update my code and this ans for WordPress front-end AJAX file upload tutorial
- 0
- 2017-04-18
- Adnan Limdiwala
La réponsefonctionnetrèsbien.Pourquoi cen'estpasmarqué commebonne réponse?Il y a uneerreur dans le codejs.l'original était ->}erreur:et labonneest},erreur: (amanqué la virgule après})

The answer works fine. Why this is not marked as right answer? There is an error in js code. original was --> }error: and the correct one is }, error: (missed the comma after })
- 0
- 2017-11-14
- Alaksandar Jesus Gene
Wow .. Cela afonctionnépourmoi !.Merci!

Wow.. This worked foe me!. Thanks!
- 0
- 2020-08-11
- NeenuChandran

Asha · Answer 2 · 2020-02-13

1

2020-02-13

< HTML

 <form id="article_form" name="article_form" class="wordpress-ajax-form" method="post" action="<?php echo admin_url('admin-ajax.php'); ?>" enctype="multipart/form-data" >
          <input type="file" name="uploadedfiles" id="uploadedfiles"  accept="image/*"  >
          <br>
          <input type="hidden" name="action" value="custom_action">
          <br>
          <button>Send</button>
       </form>

<↓JS

  $(".wordpress-ajax-form").submit(function(evt){  

  evt.preventDefault();
  var formData = new FormData($(this)[0]);

  $.ajax({
    url: $('#article_form').attr('action'),
    type: 'POST',
    data: formData,
    async: true,
    cache: false,
    contentType: false,
    enctype: 'multipart/form-data',
    processData: false,
    success: function (response) {
    // alert(response);
    alert('Article created Successfully!!!');
    }
  });
  return false;
  });

HTML

<form id="article_form" name="article_form" class="wordpress-ajax-form" method="post" action="<?php echo admin_url('admin-ajax.php'); ?>" enctype="multipart/form-data" >
          <input type="file" name="uploadedfiles" id="uploadedfiles"  accept="image/*"  >
          <br>
          <input type="hidden" name="action" value="custom_action">
          <br>
          <button>Send</button>
       </form>

JS

 $(".wordpress-ajax-form").submit(function(evt){  

  evt.preventDefault();
  var formData = new FormData($(this)[0]);

  $.ajax({
    url: $('#article_form').attr('action'),
    type: 'POST',
    data: formData,
    async: true,
    cache: false,
    contentType: false,
    enctype: 'multipart/form-data',
    processData: false,
    success: function (response) {
    // alert(response);
    alert('Article created Successfully!!!');
    }
  });
  return false;
  });

Rakesh Shah · Answer 3 · 2017-07-10

0

2017-07-10

tous les codespourfunction.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";
                }

        }


}
}

}

all codes for 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";
                }

        }


}
}

}

besoin d'uneexplication

need an explanation
- 0
- 2017-11-11
- Rich

Rakesh Shah · Answer 4 · 2017-07-10

-1

2017-07-10

jQuery (document) .ready (fonction () { //alert ('salut'); //alerte (mytheme.ajax_url);

 jQuery('#abc').validate({
    rules: {
        title: "required",
        arabic_title: "required",
        principle_investigators: "required",
        co_investgators: "required",
        coverage_area: "required"



    },
    messages: {
        title: "enter title",
        arabic_title: "arabic title required",
        principle_investigators: "principle investigators required  required",
        co_investgators: "co investgators  required",
        coverage_area: "coverage area  required"

    },
        submitHandler: function(form) {           
        var formData = new FormData(jQuery('#abc')[0]); 
        jQuery.ajax({
            url: mytheme.ajax_url,
            type: 'POST',
            data: formData,
            async: false,
            cache: false,
            contentType: false,
            enctype: 'multipart/form-data',
            processData: false,
            success: function(data) {
                alert(data);
                if (data == '1') {
                    alert("successfully submited");
                }

            }
        });
        return false;
    }

});

});

jQuery(document).ready(function() { //alert('hi'); //alert( mytheme.ajax_url);

jQuery('#abc').validate({
    rules: {
        title: "required",
        arabic_title: "required",
        principle_investigators: "required",
        co_investgators: "required",
        coverage_area: "required"



    },
    messages: {
        title: "enter title",
        arabic_title: "arabic title required",
        principle_investigators: "principle investigators required  required",
        co_investgators: "co investgators  required",
        coverage_area: "coverage area  required"

    },
        submitHandler: function(form) {           
        var formData = new FormData(jQuery('#abc')[0]); 
        jQuery.ajax({
            url: mytheme.ajax_url,
            type: 'POST',
            data: formData,
            async: false,
            cache: false,
            contentType: false,
            enctype: 'multipart/form-data',
            processData: false,
            success: function(data) {
                alert(data);
                if (data == '1') {
                    alert("successfully submited");
                }

            }
        });
        return false;
    }

});

});

celafonctionne alors s'il vousplaît liretout le code

its working so please read all code
- 0
- 2017-07-10
- Rakesh Shah
Bienvenue à WPSE.S'il vousplaît,ne laissezpas simplementtomber le code,maisexpliquez ce qu'ilfait,pourquoiil lefait ainsi,...

Welcome to WPSE. Please don't just drop code but give some explanation what it does, why it does it this,...
- 2
- 2017-07-10
- kraftner