AJAX fileupload - TypeError: ajaxSubmit() nu este o funcție
Am un plugin care funcționează ca un POST standard dar nu ca o cerere POST AJAX.
Primesc o eroare "not a function" în Firebug cu această funcție:
TypeError: jQuery(...).ajaxSubmit is not a function
jQuery(this).ajaxSubmit(options);
Această soluție magică a venit în ajutor: http://codeimpossible.com/2010/01/13/solving-document-ready-is-not-a-function-and-other-problems/
( function($) {
} ) ( jQuery );
Acesta este fișierul js care este încărcat cu pluginul meu - se încarcă în header:
jQuery(document).ready(function(){
var options = {
target: '#output', // elementul țintă care va fi actualizat cu răspunsul serverului
beforeSubmit: beforeSubmit, // callback înainte de trimitere
success: afterSuccess, // callback după trimitere
uploadProgress: OnProgress, // callback pentru progresul încărcării
resetForm: true // resetează formularul după trimiterea cu succes
}
jQuery('#nanny_app_upload').on('submit', function(e) {
e.preventDefault();
alert('Apelat submit jQuery');
jQuery(this).ajaxSubmit(options);
alert('Post submit jQuery');
// întotdeauna returnează false pentru a preveni trimiterea standard a browserului și navigarea pe pagină
alert('Am primit acest răspuns de la server: ' + response);
return false;
});
//funcție după încărcarea cu succes a fișierului (când serverul răspunde)
function afterSuccess(){
alert('jQuery afterSuccess');
jQuery('#submit-btn').show(); //afișează butonul de submit
jQuery('#loading-img').hide(); //ascunde butonul de încărcare
jQuery('#progressbox').delay( 1000 ).fadeOut(); //ascunde bara de progres
}
//funcție pentru verificarea dimensiunii fișierului înainte de încărcare
function beforeSubmit(){
alert('jQuery beforeSubmit');
jQuery('#submit-btn').hide(); //ascunde butonul de submit
jQuery('#loading-img').show(); //afișează butonul de încărcare
jQuery("#output").html("");
}
//funcție pentru bara de progres
function OnProgress(event, position, total, percentComplete)
{
//Bara de progres
alert('jQuery OnProgress');
jQuery('#progressbox').show();
jQuery('#statustxt').show();
jQuery('#progressbar').width(percentComplete + '%') //actualizează procentul complet al barei de progres
jQuery('#statustxt').html(percentComplete + '%'); //actualizează textul de stare
if(percentComplete>50)
{
jQuery('#statustxt').css('color','#000'); //schimbă culoarea textului de stare în negru după 50%
}
}
});
Iată Formularul generat dintr-un child theme:
//Formular de încărcare pentru Nannie
add_action("action_nannie_upload_form", "do_action_nannie_upload_form");
function do_action_nannie_upload_form()
{
$url = plugins_url();
$plugins_url = $url . "/nannie-app/";
?><br>
Un FORMULAR de încărcare!<br>
<form action="<?php echo admin_url('admin-ajax.php'); ?>"
method="post" enctype="multipart/form-data" id="nannie_app_upload">
<br>
<?php wp_nonce_field('nannie_app_upload','nannie_upload_ajax_nonce'); ?>
<!-- Adaugă fișier nou -->
<span class="btn btn-file">Selectează fișier:
<input name="FileInput" id="FileInput" type="file" /></span>
<button type="submit" class="btn" id="submit-btn">Încarcă</button>
</form>
<img src="<?php echo $plugins_url; ?>images/ajax-loader.gif" id="loading-img"
style="display:none;" alt="Te rog așteaptă"/>
<div id="progressbox" style="display:none;"><div id="progressbar"></div >
<div id="statustxt">0%</div></div>
<div id="output"></div>
<br>
<br>
<hr/>
<script src="<?php echo get_stylesheet_directory_uri(); ?>/plugins/form/jquery.form.js"></script>
<script src="<?php echo get_stylesheet_directory_uri(); ?>/plugins/uload/ajaxFileUpload.js"></script>
<?php
}
Și iată acțiunea apelată la trimiterea formularului. Dacă elimin verificarea pentru anteturile AJAX, fișierul se încarcă dar mă redirecționează către o pagină goală.
add_action("wp_ajax_nopriv_nannie_app_upload", "nannie_app_upload");
function nannie_app_upload(){
global $wpdb;
if(isset($_FILES["FileInput"])){
log_me("nannie_app_upload: FileInput găsit");
if (!isset( $_POST['nannie_upload_ajax_nonce']) ||
!wp_verify_nonce($_POST['nannie_upload_ajax_nonce'], 'nannie_app_upload')){
print 'Ne pare rău, nonce-ul nu s-a verificat.';
log_me("nannie_app_upload: nonce-ul nu s-a verificat");
exit;
}
if (!isset($_SERVER['HTTP_X_REQUESTED_WITH'])){
if(isset($_SESSION["naap_app_uid"])){
$app_uid = $_SESSION["naap_app_uid"];
}
log_me('nannie_app_upload: AJAX Nu a fost apelat #' . $app_uid);
die();
}
//Verifică dacă dimensiunea fișierului este mai mică decât cea permisă.
if ($_FILES["FileInput"]["size"] > 5242880) {
log_me('nannie_app_upload: Dimensiunea fișierului este prea mare! #' . $app_uid);
die("Dimensiunea fișierului este prea mare!");
}
$_SESSION["naap_app_uid"] = $app_uid;
$UploadDirectory = WP_PLUGIN_DIR."/nannie-app/tmp/" . $app_uid . "/";
////////////////////////////////////////////////////
//http://www.saaraan.com/2012/06/ajax-file-upload-with-php-and-jquery
if (!@file_exists($UploadDirectory)) {
//folderul destinație nu există
if(!is_dir($UploadDirectory)) {
mkdir($UploadDirectory);
if (!@file_exists($UploadDirectory)) {
log_me('nannie_app_upload: Directorul de încărcare lipsește pentru încărcarea AJAX #' . $app_uid);
die("Asigură-te că directorul de încărcare există!");
}
}
}
//verificare tip fișier pe server
switch(strtolower($_FILES['FileInput']['type']))
{
//tipuri de fișiere permise
case 'image/png': //fișier png
case 'image/gif': //fișier gif
case 'image/jpeg': //fișier jpeg
case 'application/pdf': //fișier PDF
case 'application/msword': //fișier word
case 'application/vnd.ms-excel': //fișier excel
case 'application/x-zip-compressed': //fișier zip
case 'text/plain': //fișier txt
case 'text/html': //fișier html
//Titlul fișierului va fi folosit ca nume nou
$FileName = strtolower($_FILES['FileInput']['name']); //numele fișierului încărcat
$ImageExt = substr($FileName, strrpos($FileName, '.')); //extensia fișierului
$NewFileName = substr($FileName, 0, strrpos($FileName, '.') ); //numele fișierului înainte de randomizare
$FileType = $_FILES['FileInput']['type']; //tipul fișierului
$FileSize = $_FILES['FileInput']["size"]; //dimensiunea fișierului
$RandNumber = rand(0, 9999999999); //Număr random pentru a face fiecare nume de fișier unic.
$uploaded_date = date("Y-m-d H:i:s");
$NewFileName = preg_replace(array('/\s/', '/\.[\.]+/', '/[^\w_\.\-]/'), array('_', '.', ''), strtolower($NewFileName));
$NewFileName = $NewFileName.'_'.$RandNumber.$ImageExt;
//Redenumește și salvează fișierul încărcat în folderul destinație.
if(move_uploaded_file($_FILES['FileInput']["tmp_name"], $UploadDirectory . $NewFileName )){
//viitor Insert SQL pentru a înregistra fișierele încărcate - tabel nou napp_applications_files
log_me('nannie_app_upload: Încărcare cu succes #' . $app_uid);
die('Succes! Fișier încărcat.');
break;
}else{
log_me('nannie_app_upload: Încărcare eșuată #' . $app_uid);
die('eroare la încărcarea fișierului!');
break;
}
break;
default:
log_me('nannie_app_upload: Fișier nesuportat #' . $app_uid);
die('Fișier nesuportat!'); //eroare pentru tipuri de fișiere nepermise
break;
}
}else{
log_me('nannie_app_upload: Ceva nu a funcționat la încărcare! Este setat corect "upload_max_filesize"? #' . $app_uid);
die('Ceva nu a funcționat la încărcare! Este setat corect "upload_max_filesize"?');
}
}
ajaxSubmit
nu este o funcție de bază din jQuery.
Se pare că trebuie să incluzi un plugin jQuery (cum ar fi acesta), sau să rescrii funcția ta folosind o sintaxă precum aceasta, utilizând post()
din jQuery
$.post(ajaxurl, data, function(response) {
// funcția de răspuns
}
sau cu ajax()
din jQuery
$.ajax({
url: ajaxurl,
context: data
});
Asigură-te că ai definit ajaxurl
în partea de frontend - WordPress îl definește automat în Backend.
Apropo, folosirea post()
este folosirea AJAX, deoarece trimiți cererea asincron de la browser la server și procesezi rezultatul ulterior. Aceasta este esența AJAX, chiar dacă funcția ta nu are un nume precum AJAX :)

Ai atins exact problema - ajaxSubmit este din jQuery form. Am încercat să adaug plugin-ul js doar pe o pagină - doar pentru test, dar tot primesc eroarea că nu este o funcție. Am actualizat js-ul de mai sus pentru a reflecta modificările făcute până acum.
