| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <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"> |
| <title>Ajax Image upload</title> |
| </head> |
| <body> |
|
|
|
|
| <div class="container-fluid p-5"> |
| |
| <ul class="nav nav-pills"> |
| <li class="nav-item"> |
| <a class="nav-link active" href="jquery-image-upload.php">JQuery Image upload</a> |
| </li> |
| <li class="nav-item"> |
| <a class="nav-link" 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 Image 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="img_upload_form"> |
| |
| <div class="form-group"> |
| <input type="file" class="form-control-file" name="file_image" id="file_image"> |
| </div> |
| |
| <button type="submit" class="btn btn-primary btn-sm">upload</button> |
| |
| </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"><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> |
| </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">"img_upload_form"</span><span style="color: #330099;">></span> |
| <span style="color: #330099;"><div</span> <span style="color: #330099">class=</span><span style="color: #CC3300">"form-group"</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">id=</span><span style="color: #CC3300">"file_image"</span><span style="color: #330099;">></span> |
| <span style="color: #330099;"></div></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;"></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">" |
| event.preventDefault(); |
|
|
| <span style="color: #006699;">var</span> fd <span style="color: #555555">=</span> <span style="color: #006699;">new</span> FormData(); |
| <span style="color: #006699;">var</span> files <span style="color: #555555">=</span> $(<span style="color: #CC3300">& |
| fd.append(<span style="color: #CC3300">'file_image'</span>,files); |
|
|
| <span style="color: #006699;">if</span> (files <span style="color: #555555">==</span> <span style="color: #006699;">undefined</span>) { |
| alert(<span style="color: #CC3300">'Plese select a image'</span>); |
| <span style="color: #006699;">return</span> <span style="color: #006699;">false</span>; |
| } |
| $(<span style="color: #CC3300">" |
|
|
| $.ajax({ |
| url<span style="color: #555555">:</span> <span style="color: #CC3300">'upload.php'</span>, |
| type<span style="color: #555555">:</span> <span style="color: #CC3300">"POST"</span>, |
| data<span style="color: #555555">:</span> fd, |
| contentType<span style="color: #555555">:</span> <span style="color: #006699;">false</span>, |
| cache<span style="color: #555555">:</span> <span style="color: #006699;">false</span>, |
| processData<span style="color: #555555">:</span> <span style="color: #006699;">false</span>, |
| dataType<span style="color: #555555">:</span> <span style="color: #CC3300">"json"</span>, |
| success <span style="color: #555555">:</span> <span style="color: #006699;">function</span>(data) { |
| <span style="color: #006699;">if</span> (data.status <span style="color: #555555">==</span> <span style="color: #CC3300">& |
|
|
| <span style="color: #006699;">var</span> img <span style="color: #555555">=</span> <span style="color: #CC3300">& |
|
|
| <span style="color: #CC3300">& |
| <span style="color: #CC3300">& |
|
|
| <span style="color: #CC3300">& |
| <span style="color: #CC3300">& |
| <span style="color: #CC3300">& |
| <span style="color: #CC3300">& |
| <span style="color: #CC3300">& |
| <span style="color: #CC3300">& |
| <span style="color: #CC3300">& |
| <span style="color: #CC3300">& |
| <span style="color: #CC3300">& |
| <span style="color: #CC3300">& |
|
|
| $(<span style="color: #CC3300">" |
|
|
|
|
| }<span style="color: #006699;">else</span>{ |
|
|
| $(<span style="color: #CC3300">" |
| } |
| $(<span style="color: #CC3300">& |
| }, |
| error <span style="color: #555555">:</span> <span style="color: #006699;">function</span>(xhr) { |
| $(<span style="color: #CC3300">" |
| } |
| }) |
| }); |
| }); |
| </pre></div> |
|
|
|
|
| </div> |
|
|
| <script src="./js/jquery-3.5.1.min.js"></script> |
| <script> |
| $(function() { |
|
|
| $("#img_upload_form").on("submit", function() { |
| event.preventDefault(); |
|
|
| var fd = new FormData(); |
| var files = $('#file_image')[0].files[0]; |
| fd.append('file_image',files); |
|
|
| if (files == undefined) { |
| alert('Plese select a image'); |
| return false; |
| } |
| $("#uploaded_images_preview").html('<div class="text-center m-2">loading...</div>'); |
|
|
| $.ajax({ |
| url: 'upload.php', |
| type: "POST", |
| data: fd, |
| contentType: false, |
| cache: false, |
| processData: false, |
| dataType: "json", |
| success : function(data) { |
| if (data.status == 'success') { |
|
|
| var img = '<div class="text-center">'+ |
|
|
| '<img class="img-thumbnail" src="'+(data.image_data.thumb == "" ? data.image_data.url : data.image_data.thumb)+'" alt="demo image" style="max-width: 200px;">'+ |
| '</div>'+ |
|
|
| '<div class="card-body text-left">'+ |
| ' <pre>Name : '+data.image_data.name+'</pre>'+ |
| ' <pre>Type : '+data.image_data.type+'</pre>'+ |
| ' <pre>Size : '+data.image_data.size_format+'</pre>'+ |
| ' <pre>Size byte : '+data.image_data.size+'</pre>'+ |
| ' <pre>Width : '+data.image_data.width+'px</pre>'+ |
| ' <pre>Height : '+data.image_data.height+'px</pre>'+ |
| ' <pre>Thumb : '+data.image_data.thumb+'</pre>'+ |
| ' <pre>URL : '+data.image_data.url+'</pre>'+ |
| '</div>'; |
| $("#uploaded_images_preview").html(img); |
|
|
|
|
| }else{ |
|
|
| $("#uploaded_images_preview").html('<div class="alert alert-danger" role="alert">'+data.msg+'</div>'); |
| } |
| $('#file_image').val(''); |
| }, |
| error : function(xhr) { |
| $("#uploaded_images_preview").html('<div class="alert alert-danger" role="alert">error '+xhr.status+ " "+xhr.statusText+'</div>'); |
| } |
| }) |
| }); |
| }); |
|
|
| </script> |
| </body> |
| </html> |
