AJAX fileupload – TypeError: pas une fonction ajaxSubmit ()

Jai un plugin qui fonctionne comme un POST standard mais pas comme une requête AJAX POST.

Jobtiens une erreur de fonction dans Firebug avec cette fonction:

TypeError: jQuery (…). ajaxSubmit nest pas une fonction

jQuery(this).ajaxSubmit(options); 

Cette magie est venue à la rescousse: http://codeimpossible.com/2010/01/13/solving-document-ready-is-not-a-function-and-other-problems/

( function($) { } ) ( jQuery ); 

Ceci est le fichier js quil est mis en file dattente avec mon plugin – il se charge dans len-tête:

jQuery(document).ready(function(){ var options = { target: "#output", // target element(s) to be updated with server response beforeSubmit: beforeSubmit, // pre-submit callback success: afterSuccess, // post-submit callback uploadProgress: OnProgress, //upload progress callback resetForm: true // reset the form after successful submit } jQuery("#nanny_app_upload").on("submit", function(e) { e.preventDefault(); alert("jQuery submit called"); jQuery(this).ajaxSubmit(options); alert("jQuery post submit"); // always return false to prevent standard browser submit and page navigation alert("Got this from the server: " + response); return false; }); //function after succesful file upload (when server response) function afterSuccess(){ alert("jQuery afterSuccess"); jQuery("#submit-btn").show(); //show submit button jQuery("#loading-img").hide(); //hide loading button jQuery("#progressbox").delay( 1000 ).fadeOut(); //hide progress bar } //function to check file size before uploading. function beforeSubmit(){ alert("jQuery beforeSubmit"); jQuery("#submit-btn").hide(); //hide submit button jQuery("#loading-img").show(); //show loading button jQuery("#output").html(""); } //progress bar function function OnProgress(event, position, total, percentComplete) { //Progress bar alert("jQuery OnProgress"); jQuery("#progressbox").show(); jQuery("#statustxt").show(); jQuery("#progressbar").width(percentComplete + "%") //update progressbar percent complete jQuery("#statustxt").html(percentComplete + "%"); //update status text if(percentComplete>50) { jQuery("#statustxt").css("color","#000"); //change status text to white after 50% } } }); 

Voici le formulaire qui est généré à partir dun thème enfant:

//Nannie upload form 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> An Upload FORM!<br> <form action="<?php echo admin_url("admin-ajax.php"); ?>" method="post" enctype="multipart/form-data"> <br> <?php wp_nonce_field("nannie_app_upload","nannie_upload_ajax_nonce"); ?> <!-- Add new File --> <span class="btn btn-file">Select file: <input name="FileInput" type="file" /></span> <button type="submit" class="btn">Upload</button> </form> <img src="<?php echo $plugins_url; ?>images/ajax-loader.gif" style="display:none;" alt="Please Wait"/> <div style="display:none;"><div></div > <div>0%</div></div> <div></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 } 

Et voici laction qui est appelée par le formulaire nous faire parvenir. Si je supprime la vérification des en-têtes AJAX, il télécharge le fichier et me redirige vers une page vierge.

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 found"); if (!isset( $_POST["nannie_upload_ajax_nonce"]) || !wp_verify_nonce($_POST["nannie_upload_ajax_nonce"], "nannie_app_upload")){ print "Sorry, your nonce did not verify."; log_me("nannie_app_upload: nonce did not verify"); 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 Not Called #" . $app_uid); die(); } //Is file size is less than allowed size. if ($_FILES["FileInput"]["size"] > 5242880) { log_me("nannie_app_upload: File size is too big! #" . $app_uid); die("File size is too big!"); } $_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)) { //destination folder does not exist if(!is_dir($UploadDirectory)) { mkdir($UploadDirectory); if (!@file_exists($UploadDirectory)) { log_me("nannie_app_upload: Upload directory missing for AJAX upload #" . $app_uid); die("Make sure Upload directory exist!"); } } } //allowed file type Server side check switch(strtolower($_FILES["FileInput"]["type"])) { //allowed file types case "image/png": //png file case "image/gif": //gif file case "image/jpeg": //jpeg file case "application/pdf": //PDF file case "application/msword": //ms word file case "application/vnd.ms-excel": //ms excel file case "application/x-zip-compressed": //zip file case "text/plain": //txt file case "text/html": //html file //File Title will be used as new File name $FileName = strtolower($_FILES["FileInput"]["name"]); //uploaded file name $ImageExt = substr($FileName, strrpos($FileName, ".")); //file extension $NewFileName = substr($FileName, 0, strrpos($FileName, ".") ); //file name before random $FileType = $_FILES["FileInput"]["type"]; //file type $FileSize = $_FILES["FileInput"]["size"]; //file size $RandNumber = rand(0, 9999999999); //Random number to make each filename unique. $uploaded_date = date("Y-m-d H:i:s"); $NewFileName = preg_replace(array("/\s/", "/\.[\.]+/", "/[^\w_\.\-]/"), array("_", ".", ""), strtolower($NewFileName)); $NewFileName = $NewFileName."_".$RandNumber.$ImageExt; //Rename and save uploded file to destination folder. if(move_uploaded_file($_FILES["FileInput"]["tmp_name"], $UploadDirectory . $NewFileName )){ //future SQL Insert to record the files uploaded - new table napp_applications_files log_me("nannie_app_upload: Success Upload #" . $app_uid); die("Success! File Uploaded."); break; }else{ log_me("nannie_app_upload: Failed Upload #" . $app_uid); die("error uploading File!"); break; } break; default: log_me("nannie_app_upload: Unsupported Upload #" . $app_uid); die("Unsupported File!"); //output error enforcing file types break; } }else{ log_me("nannie_app_upload: Something wrong with upload! Is "upload_max_filesize" set correctly? #" . $app_uid); die("Something wrong with upload! Is "upload_max_filesize" set correctly?"); } }