01.<?php
02.if(isset($_POST['url'])){
03.
04. return json_encode(array('response'=>'complete'));
05.}
06.?><!doctype html>
07.<html>
08.<head>
09.<title>Upload use ajax</title>
10.<script src="jquery.js"></script>
11.<script>
12.function readURL(input) {
13. if (input.files && input.files[0]) {
14. var reader = new FileReader();
15. reader.onload = function (e) {
16. var nm=input.value.replace(/\\/g,'/').split('/');
17. var im='<img data-name="'+nm[nm.length-1]+'" src="'+e.target.result+'" width=200 >';
18. $('#countdown').html($('#pic_list').append(im).children().length);
19. }
20. reader.readAsDataURL(input.files[0]);
21. }
22.}
23.var c=0;
24.$(document).ready(function(e) {
25. $('#fileup').change(function(e) {
26. readURL(this); $('#forupload').show()
27. });
28. $('#upload').click(function(e){
29. var im = $('img'); c=im.length;
30. im.each(function(ix, obj){
31. var src=$(obj).attr('src'), filename=$(obj).data('name');
32. setTimeout(function(){
33. $.ajax({
34. url: "",
35. type:'POST', dataType: 'json',
36. data:{
37. img: src.replace(/data:image\/(png|jpeg|jpg|bmp|gif);base64,/, ''),
38. ext: src.replace(/^data:image\/(png|jpeg|jpg|bmp|gif);base64,.+/, '$1'),
39. name: filename
40. }
41. }).done(function(rs){
42. if(rs.response=='complete'){
43. $('#countdown').html(--c);
44. if(!c){
45. $('#forupload').hide();
46. }
47. }
48. });
49. }, 100);
50. });
51. });
52.}).delegate('img', 'dblclick', function(){
53. if(confirm('ต้องการลบรูปภาพนี้')){
54. $(this).remove();
55. if($('#pic_list').children().length==0) $('#forupload').hide();
56. }
57.})
58.</script>
59.</head>
60.<body>
61.<label>Photo Upload</label><br>
62.<input type="file" id="fileup" ><br>
63.<label>Picture View</label><br>
64.<br>
65.<div id="pic_list" style="display: inline;">
66.</div><br>
67.<div id="forupload" style="display: none;">
68.<button type=button id="upload" >Upload</button><b id="countdown" ></b> file(s)
69.<p style="color: red">*** double click on image for delete</p>
70.</div>
71.</body>
72.</html>
