| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <title>Ajax Image upload</title> |
| <meta charset="utf-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> |
| <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> |
| <link rel="stylesheet" href="./css/hcg-image-upload.css"> |
|
|
| </head> |
| <body> |
|
|
|
|
| <div class="container-fluid p-5"> |
| |
| <ul class="nav nav-pills"> |
| <li class="nav-item"> |
| <a class="nav-link" href="jquery-image-upload.php">JQuery Image upload</a> |
| </li> |
| <li class="nav-item"> |
| <a class="nav-link active" href="jquery-multiple-image-upload.php">JQuery multiple Images upload</a> |
| </li> |
| <li class="nav-item"> |
| <a class="nav-link" href="index.php">Image upload</a> |
| </li> |
| </ul> |
| |
| <br> |
| |
| <div class="text-center"><h3>JQuery multiple Images upload</h3></div> |
| <hr> |
| |
| <div class="row p-2"> |
| |
| <div class="col-sm border p-2 m-2 rounded"> |
| <form action="" method="post" enctype="multipart/form-data" id="multiple-upload"> |
| <div class="row align-items-center"> |
| <div class="col-sm mb-2"> |
| <input type="file" class="form-control-file" name="file_image"> |
| </div> |
| |
| <div class="col-sm mb-2"> |
| <button type="submit" class="btn btn-primary btn-sm">upload</button> |
| </div> |
| </div> |
| </form> |
| </div> |
| |
| |
| <div class="col-sm border p-2 m-2 rounded"> |
| <div id="uploaded_images_preview"></div> |
| </div> |
| |
| </div> |
| <hr> |
| |
| <div style="background: #f0f3f3; overflow:auto;width:auto;border: 1px solid #ced4da;padding:5px;"><pre style="margin: 0; line-height: 125%"><span style="color: #330099;"><link</span> <span style="color: #330099">rel=</span><span style="color: #CC3300">"stylesheet"</span> <span style="color: #330099">href=</span><span style="color: #CC3300">"css/upload-images.css"</span><span style="color: #330099;">></span> |
| <span style="color: #330099;"><script </span><span style="color: #330099">src=</span><span style="color: #CC3300">"https://code.jquery.com/jquery-3.5.1.min.js"</span><span style="color: #330099;">></script></span> |
| <span style="color: #330099;"><script </span><span style="color: #330099">src=</span><span style="color: #CC3300">"js/hcg-image-upload.js"</span><span style="color: #330099;">></script></span> |
| </pre></div> |
| |
| <br> |
| |
| <div style="background: #f0f3f3; overflow:auto;width:auto;border: 1px solid #ced4da;padding:5px;"><pre style="margin: 0; line-height: 125%"><span style="color: #330099;"><form</span> <span style="color: #330099">action=</span><span style="color: #CC3300">""</span> <span style="color: #330099">method=</span><span style="color: #CC3300">"post"</span> <span style="color: #330099">enctype=</span><span style="color: #CC3300">"multipart/form-data"</span> <span style="color: #330099">id=</span><span style="color: #CC3300">"multiple-upload"</span><span style="color: #330099;">></span> |
| <span style="color: #330099;"><div</span> <span style="color: #330099">class=</span><span style="color: #CC3300">"row align-items-center"</span><span style="color: #330099;">></span> |
| <span style="color: #330099;"><div</span> <span style="color: #330099">class=</span><span style="color: #CC3300">"col-sm"</span><span style="color: #330099;">></span> |
| <span style="color: #330099;"><input</span> <span style="color: #330099">type=</span><span style="color: #CC3300">"file"</span> <span style="color: #330099">class=</span><span style="color: #CC3300">"form-control-file"</span> <span style="color: #330099">name=</span><span style="color: #CC3300">"file_image"</span><span style="color: #330099;">></span> |
| <span style="color: #330099;"></div></span> |
| |
| <span style="color: #330099;"><div</span> <span style="color: #330099">class=</span><span style="color: #CC3300">"col-sm text-right"</span><span style="color: #330099;">></span> |
| <span style="color: #330099;"><button</span> <span style="color: #330099">type=</span><span style="color: #CC3300">"submit"</span> <span style="color: #330099">class=</span><span style="color: #CC3300">"btn btn-primary btn-sm"</span><span style="color: #330099;">></span>upload<span style="color: #330099;"></button></span> |
| <span style="color: #330099;"></div></span> |
| <span style="color: #330099;"></div></span> |
| <span style="color: #330099;"></form></span> |
| </pre></div> |
| |
| |
| <br> |
| |
| <div style="background: #f0f3f3; overflow:auto;width:auto;border: 1px solid #ced4da;padding:5px;"><pre style="margin: 0; line-height: 125%">$(<span style="color: #006699;">function</span>() { |
| $(<span style="color: #CC3300">" |
| multiple <span style="color: #555555">:</span> <span style="color: #006699;">true</span>, |
| previewImages <span style="color: #555555">:</span> <span style="color: #006699;">true</span>, |
| maxUpload <span style="color: #555555">:</span> <span style="color: #FF6600">100</span>, |
| url<span style="color: #555555">:</span> <span style="color: #CC3300">& |
| complete<span style="color: #555555">:</span> <span style="color: #006699;">function</span> (success_imgs, error_imgs) { |
| alert(<span style="color: #CC3300">'done. \n success '</span><span style="color: #555555">+</span>success_imgs.length <span style="color: #555555">+</span><span style="color: #CC3300">'\n error '</span><span style="color: #555555">+</span>error_imgs.length); |
| }, |
| success<span style="color: #555555">:</span> <span style="color: #006699;">function</span>(img_array) { |
| console.log(img_array.url); |
| $(<span style="color: #CC3300">" |
| }, |
| error<span style="color: #555555">:</span> <span style="color: #006699;">function</span> (error_img_array) { |
| console.log(error_img_array.name); |
| } |
| }); |
|
|
| }); |
| </pre></div> |
|
|
|
|
| </div> |
|
|
| <script src="./js/jquery-3.5.1.min.js"></script> |
| <script src="./js/hcg-image-upload.js"></script> |
|
|
| <script> |
| $(function() { |
| $("#multiple-upload").hcgImageUploads({ |
| multiple : true, |
| previewImages : true, |
| maxUpload : 1000, |
| url: 'upload.php', |
| complete: function (success_imgs, error_imgs) { |
| $("#uploaded_images_preview").prepend('<div style="margin-bottom:10px">success '+success_imgs.length +'<br> error '+error_imgs.length+'</div>'); |
| }, |
| success: function(img_array) { |
| |
| $("#uploaded_images_preview").append('<img src="'+img_array['url']+'" width="50px" height="50px" style="margin: 2px;"/>'); |
| }, |
| error: function (error_img_array) { |
| |
| } |
| }); |
|
|
| }); |
| </script> |
|
|
| </body> |
| </html> |
