WordPress AJAX Téléchargement de fichier - FrontEnd
J'ai donc parcouru tous les tutoriels de téléchargement de fichiers AJAX frontaux WordPress que je peux très bien. Rien ne fonctionne pour moi pour le moment. Celui qui me semble le plus logique est celui-ci: http://theaveragedev.com/wordpress-files-ajax/
Voici mon code:
Dans mon fichier template 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>
C'est 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);
}
});
});
Ceci est dans mon 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');
J'ai essayé d'ajouter l'enctype à l'élément de formulaire et cela n'a pas fonctionné. L'erreur que je reçois continuellement est une alerte disant "non défini". Est-ce que quelqu'un sait comment je peux corriger ce problème?
EDIT
Le problème 'non défini' a maintenant disparu, car j'ai modifié le fichier js afin de créer un événement de clic et modifié le sélecteur pour la boucle de saisie du formulaire:
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;
});
});
Les fichiers ne sont toujours pas téléchargés dans le dossier multimédia. Je souhaite également obtenir l'URL téléchargée une fois qu'elle a été téléchargée.
J'écris dans la console l'objet fichier afin que je puisse voir ce qui se passe. En voici un exemple:
Object {security: "e6db2a6eee", _wp_http_referer: "/chat?sessionappid=138", action: "my_file_upload", file_upload: "C:\fakepath\download.jpg", "": "Go"}
Y a-t-il quelque chose qui ne va pas avec cela et est-ce la raison pour laquelle le téléchargement n'est pas effectué?
Salut vous avez utiliser ce cde pour WordPress front-end AJAX tutoriel de téléchargement de fichier _ Code Voici mon code:
Dans mon fichier template 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>
C'est 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 code iS functions.php
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();
}
tous les codes pour 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";
}
}
}
}
}
votre formulaire
Entrez vos informations ....
<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
}
}