blob: 134b862deb5ebc13f6608914e0840218307ffab5 (
plain)
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
79
80
81
82
83
84
85
86
87
88
89
|
<html>
<head>
<title>PHP AJAX Image Upload</title>
<style>
body { font-family: Ubuntu, Arial, sans-serif; font-size: 14px; }
.bgColor { max-width: 440px; height:150px; background-color: #fff4be; border-radius: 4px; }
.bgColor label{ font-weight: bold; color: #A0A0A0; }
#targetLayer{ float:left;
width:150px; height:150px;
text-align:center; line-height:150px;
font-weight: 700; color: #C0C0C0; background-color: #F0E8E0;
border-bottom-left-radius: 4px;
border-top-left-radius: 4px;
}
#uploadFormLayer{ float:left; padding: 20px; }
.btnSubmit { background-color: #696969; color: #fff;
border: #696969 1px solid; border-radius: 4px;
padding: 5px 30px; margin-top: 10px;
}
.inputFile { padding: 5px; background-color: #fff;
border:#F0E8E0 1px solid; border-radius: 4px;
}
.image-preview { max-width:100%; max-height:100%;
border-bottom-left-radius: 4px; border-top-left-radius: 4px;
}
</style>
</head>
<body>
<div class="bgColor">
<form id="upload-form" method="post">
<div id="targetLayer">
No Image
</div>
<div id="uploadFormLayer">
<input name="fileToUpload" type="file" class="inputFile" /><br/>
<input type="submit" value="Submit" class="btnSubmit" />
</form>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/1.4.1/jquery-migrate.min.js"></script>
<script type="text/javascript">
var id = 5; // current item id
var old = ''; // current uploaded image for item
$(document).ready(function (e) {
$("#upload-form").on('submit',(function(e) {
e.preventDefault();
// url to call for next upload
var url = "upload.php?id=" + id + ((old == '') ? "" : ("&del=" + old));
var imgHTML;
$.ajax({
url: url,
type: "POST",
data: new FormData(this),
contentType: false,
cache: false,
processData:false,
success: function(data) {
var json = $.parseJSON(data);
if (json.success) {
imgHTML = '<img class="image-preview" src="/'+ json.thumbnail +'" class="upload-preview">';
old = json.img; // register new 'old' image
}
else {
imgHTML = json.err;
}
$("#targetLayer").html( imgHTML ); // refresh image
$('#upload-form').trigger("reset"); // reset form
},
error: function() {
// ...
}
});
}));
});
</script>
</body>
</html>
|
