Bonjour,
J’ai récupérer un petit script d’uploud d’image avec visualisation de l’image avant l’uploud Très sympa. De l’uthor: Kartik Visweswaran bootstrap-fileinput v4.3.5.
Dans la parti Ajax du fichier il y a des instruction pour que le script déclenche les erreurs comme la taille de l’image trop grande mauvaises extinction ex.. Dans une <div >message </div> spécial pour les alertes d’erreurs jusque la tout va bien. :)
J’ai rajouté dans le scripte de Kartik Visweswaran d’uploud images à la base un champ (email) avec restriction des doublons mail, le problème et dans la partie Ajax du script quand j’introduis un mail déjà existants sur ma BDD le formulaire reste bloqué il se passe rien c’est normale car l’email introduits existe dans ma BDD en plus la partie Json n’es pas configurée pour m’alerter que l’email existe déjà sur la BDD dans la ( div message)car a la base les alertes d’erreurs son configuré pour l’uploud d’images.
Es que on doit créer une fonction avec variable pour le champ rajouter (mail) et comment ? je suis pas top en javascript & ajax
voila mon fichier de validation uploadImage.php
<?php
if($_POST) {
// database connection
$server = '127.0.0.1';
$username = 'root';
$password = '';
$dbname = '********';
$conn = new mysqli($server, $username, $password, $dbname);
// check db connection
if($conn->connect_error) {
die("Connection Failed : " . $conn->connect_error);
}
else {
// echo "Successfully Connected";
}
$valid = array('success' => false, 'messages' => array());
$email = $_POST['email'];
$type = explode('.', $_FILES['userImage']['name']);
$type = $type[count($type) - 1];
$url = '../uploads/files' . uniqid(rand()) . '.' . $type;
if(in_array($type, array('gif', 'jpg', 'jpeg', 'png'))) {
if(is_uploaded_file($_FILES['userImage']['tmp_name'])) {
if(move_uploaded_file($_FILES['userImage']['tmp_name'], $url)) {
//******************************************************************
// Vérification doublon email avant validation du formulaire
$sql = "SELECT * FROM visitor WHERE email = '$email' ";
$result = $conn->query($sql);
$row = $result -> fetch_array(MYSQLI_ASSOC);
if (empty($row)){
// dans ce cas, la requete n'a rien retourné..
}else{
$valid['success'] = false;
$valid['messages'] = "L'email existe déjà !";
}
// insert into database
$sql = "INSERT INTO visitor (email, image) VALUES ($email','$url')";
if($conn->query($sql) === TRUE) {
$valid['success'] = true;
$valid['messages'] = "Successfully Uploaded";
}
else {
$valid['success'] = false;
$valid['messages'] = "Erreur lors du telechargement";
}
$conn->close();
}
else {
$valid['success'] = false;
$valid['messages'] = "Error while uploading";
}
}
}
echo json_encode($valid);
// upload the file
}
ma page html du formulaire
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="assets/bootstrap/css/bootstrap.min.css">
<!-- file input css -->
<link rel="stylesheet" type="text/css" href="assets/fileinput/css/fileinput.min.css">
</head>
<body>
<div class="col-md-5 col-sm-5 col-md-offset-4 col-sm-offset-4">
<form action="php_action/uploadImage.php" method="post" enctype="multipart/form-data" id="uploadImageForm">
<div class="form-group">
<label for="email">email</label>
<input name="email" type="text" required="required" class="form-control" id="email" placeholder="email">
</div>
<div id="messages"></div>
<div class="form-group">
<label for="exampleInputPassword1">Photo</label>
<div id="kv-avatar-errors-2" class="center-block" style="width:800px;display:none"></div>
<div class="kv-avatar center-block" style="width:200px">
<input id="avatar-2" name="userImage" type="file" class="file-loading">
</div>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
<!-- jquery -->
<script type="text/javascript" src="assets/jquery/jquery.min.js"></script>
<!-- bootsrap js -->
<script type="text/javascript" src="assets/bootstrap/js/bootstrap.min.js"></script>
<!-- file input -->
<script src="assets/fileinput/js/plugins/canvas-to-blob.min.js" type="text/javascript"></script>
<script src="assets/fileinput/js/plugins/sortable.min.js" type="text/javascript"></script>
<script src="assets/fileinput/js/plugins/purify.min.js" type="text/javascript"></script>
<script src="assets/fileinput/js/fileinput.min.js"></script>
<script type="text/javascript">
var btnCust = '<button type="button" class="btn btn-default" title="Add picture tags" ' +
'onclick="alert(\'Cliquez sur la Photo pour télécharger.\')">' +
'<i class="glyphicon glyphicon-tag"></i>' +
'</button>';
$("#avatar-2").fileinput({
overwriteInitial: true,
maxFileSize: 1500,
showClose: false,
showCaption: false,
showBrowse: false,
browseOnZoneClick: true,
removeLabel: '',
removeIcon: '<i class="glyphicon glyphicon-remove"></i>',
removeTitle: 'Cancel or reset changes',
elErrorContainer: '#kv-avatar-errors-2',
msgErrorClass: 'alert alert-block alert-danger',
defaultPreviewContent: '<img src="uploads/default-avatar.jpg" alt="Your Avatar" style="width:160px"><h6 class="text-muted">Click to select</h6>',
layoutTemplates: {main2: '{preview} ' + btnCust + ' {remove} {browse}'},
allowedFileExtensions: ["jpg", "png", "gif"]
});
$(document).ready(function(){
$("#uploadImageForm").unbind('submit').bind('submit', function(){
var form = $(this);
var formData = new FormData($(this)[0]);
$.ajax({
url: form.attr('action'),
type: form.attr('method'),
data: formData,
dataType: 'json',
cache: false,
contentType: false,
processData: false,
async: false,
success:function(response) {
if(response.success == true) {
$("#messages").html('<div class="alert alert-success alert-dismissible" role="alert">'+
'<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>'+
response.messages +
'</div>');
$('input[type="text"]').val('');
$(".fileinput-remove-button").click();
}
else {
$("#messages").html('<div class="alert alert-warning alert-dismissible" role="alert">'+
'<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>'+
response.messages +
'</div>');
}
}
});
return false;
});
});
</script>
</body>
</html>
Configuration: Windows / Firefox 82.0
Afficher la suite
Modifié le 12 nov. 2020 à 18:31