upload file(drag and drop)
Posté : 10 mai 2019, 09:23
bonjour à tous j'ai un petit soucis depuis un petit temps voici mon code qui uplaod les images dans la base de données tout marche bien sans probleme:
mais le problème est que après upload l'image ne s'affiche pas directement dans ma page, alors que j'ai déja programmé ca avec ajax, et le probleme en soit se situe généralement à la partie
que je n'arrive pas à bien gérer pouvais vous voir mon erreur et m'aider à améliorer mon code? Merci bien
Code : Tout sélectionner
<?php
// connect to the database
include('db.php');
/****ENVOI IMAGES DANS LE DOSSIER******************/
if (isset($_FILES['images']['name']) && !empty($_FILES['images']['name'])) {
$manager = new ImageManager();
if(!file_exists('../img')){
mkdir('../img', 0755); }
$filename = time() . basename($_FILES['images']['name'][0]);
$filepath = "../img/". $filename;
if(move_uploaded_file($_FILES['images']['tmp_name'][0], $filepath)){
$db ->query("INSERT INTO images (name,work_id,createon) VALUES('$filename','$workid',NOW())");
if(!file_exists('../img/thumbnail')){
mkdir('../img/thumbnail', 0755); }
if(!file_exists('../img/thumbnail/min700')){
mkdir('../img/thumbnail/min700', 0755); }
$manager->make($filepath)->orientate()->resize(700,null,function($constraint){$constraint->aspectRatio();})
->save('../img/thumbnail/min700/' . $filename);
}}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<!-------------------j'ai enlevé cette partie pour la visibilisté du code----------------------------------->
</head>
<body>
<form id="fm" class="hidde" action="#" method="post" enctype="multipart/form-data">
<div id="dropZone">
<p><?= $lang['dragdrop']?></p>
<span><?= $lang['or']?></span>
<input type="file" id="fileupload" name="images[]" multiple="true"/>
</div>
<p id="error"></p>
<div id="files"></div>
<div class="progress" id="progress"></div>
</form>
<script type="text/javascript">
$(function () {
var files = $("#files");
$("#fileupload").fileupload({
url: 'work_edit.php',
dropZone: '#dropZone',
dataType: 'json',
autoUpload: false
}).on('fileuploadadd', function (e, data) {
var fileTypeAllowed = /.\.(gif|jpg|png|jpeg)$/i;
var fileName = data.originalFiles[0]['name'];
var fileSize = data.originalFiles[0]['size'];
if (!fileTypeAllowed.test(fileName))
$("#error").html('<?= $lang['error'] ?>');
else if (fileSize > 500000)
$("#error").html('<?= $lang['errorb'] ?>');
else {
$("#error").html("");
data.submit();
}
}).on('fileuploaddone', function(e, data) {
var status = data.jqXHR.responseJSON.status;
var msg = data.jqXHR.responseJSON.msg;
if (status == 1) {
var path = data.jqXHR.responseJSON.path;
$("#files").fadeIn().append('<p><img style="width: 100px; height: 100px;" src="'+path+'" /></p>');
} else
$("#error").html(msg);
}).on('fileuploadprogressall', function(e,data) {
var progress = parseInt(data.loaded / data.total * 100, 10);
$("#progress").html("Completed: " + progress + "%");
});
});
</script>
</body>
</html>
Code : Tout sélectionner
if (status == 1) {
var path = data.jqXHR.responseJSON.path;
$("#files").fadeIn().append('<p><img style="width: 100px; height: 100px;" src="'+path+'" /></p>');
}