upload file(drag and drop)
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:
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
|
<?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> |
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
Code:
1
2
3
4
| if (status == 1) {
var path = data.jqXHR.responseJSON.path;
$("#files").fadeIn().append('<p><img style="width: 100px; height: 100px;" src="'+path+'" /></p>');
} |
que je n'arrive pas à bien gérer pouvais vous voir mon erreur et m'aider à améliorer mon code? Merci bien
