diff options
| author | Geo Halkiadakis <gchalkiadakis@sklavenitis.co.gr> | 2026-07-12 15:51:52 +0300 |
|---|---|---|
| committer | Geo Halkiadakis <gchalkiadakis@sklavenitis.co.gr> | 2026-07-12 15:51:52 +0300 |
| commit | 02608271bb2a9f3a65ed536984d306ee14b48e34 (patch) | |
| tree | 3f23ec48a694ec014e845c4f70d9b5f1c065403c /public/x-test-img.php | |
| download | kalassa-02608271bb2a9f3a65ed536984d306ee14b48e34.tar.gz kalassa-02608271bb2a9f3a65ed536984d306ee14b48e34.tar.bz2 kalassa-02608271bb2a9f3a65ed536984d306ee14b48e34.zip | |
Diffstat (limited to 'public/x-test-img.php')
| -rw-r--r-- | public/x-test-img.php | 89 |
1 files changed, 89 insertions, 0 deletions
diff --git a/public/x-test-img.php b/public/x-test-img.php new file mode 100644 index 0000000..134b862 --- /dev/null +++ b/public/x-test-img.php @@ -0,0 +1,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> |