+Add Image
Drop image here to upload
<?php require_once '../lib/Kendo/Autoload.php'; if ($_SERVER['REQUEST_METHOD'] == 'POST') { $type = $_GET['type']; if ($type == 'save') { $files = $_FILES['files']; // Save the uploaded files /* for ($index = 0; $index < count($files['name']); $index++) { $file = $files['tmp_name'][$index]; if (is_uploaded_file($file)) { move_uploaded_file($file, './' . $files['name'][$index]); } } */ } else if ($type == 'remove') { $fileNames = $_POST['fileNames']; // Delete uploaded files /* for ($index = 0; $index < count($fileNames); $index++) { unlink('./' . $fileNames[$index]); } */ } // Return an empty string to signify success echo ''; exit; } ?> <style> .dropZoneElement { position: relative; display: inline-block; background-color: #f8f8f8; border: 1px solid #c7c7c7; width: 230px; height: 110px; text-align: center; } .textWrapper { position: absolute; top: 50%; transform: translateY(-50%); width: 100%; font-size: 24px; line-height: 1.2em; font-family: Arial,Helvetica,sans-serif; color: #000; } .dropImageHereText { color: #c7c7c7; text-transform: uppercase; font-size: 12px; } .product { float: left; position: relative; margin: 0 10px 10px 0; padding: 0; } .product img { width: 110px; height: 110px; } .wrapper:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } </style> <div id="example" class="k-content"> <div class="demo-section k-content wide"> <div class="wrapper"> <div id="products"></div> <div class="dropZoneElement"> <div class="textWrapper"> <p><span>+</span>Add Image</p> <p class="dropImageHereText">Drop image here to upload</p> </div> </div> </div> </div> <?php $images=['.jpg', ',jpeg', '.png', '.bmp', '.gif']; $upload = new \Kendo\UI\Upload('files[]'); $upload->async(array( 'saveUrl' => 'customdropzone.php?type=save', 'removeUrl' => 'customdropzone.php?type=remove', 'autoUpload' => true, 'removeField' => 'fileNames[]' )) ->validation(array( 'allowedExtensions'=>$images )) ->showFileList(false) ->dropZone('.dropZoneElement') ->success('onSuccess'); echo $upload->render(); ?> </div> <script type="text/x-kendo-template" id="template"> <div class="product"> <img src="../content/web/foods/#= name #" alt="#: name # image" /> </div> </script> <script> var template = kendo.template($("#template").html()); var initialFiles = [{ name: "1.jpg" }, { name: "2.jpg" }, { name: "3.jpg" }, { name: "4.jpg" }, { name: "5.jpg" }, { name: "6.jpg" }]; $("#products").html(kendo.render(template, initialFiles)); function onSuccess(e) { if (e.operation == "upload") { for (var i = 0; i < e.files.length; i++) { var file = e.files[i].rawFile; if (file) { var reader = new FileReader(); reader.onloadend = function () { $("<div class='product'><img src=" + this.result + " /></div>").appendTo($("#products")); }; reader.readAsDataURL(file); } } } } </script>