469,612 Members | 1,607 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,612 developers. It's quick & easy.

AJAX file upload script replaces existing images

i am using this three files to uplod file. i got this file from net but i think these have some error. i am new to this field plz help

the script i found is some helpful but not too that i need

my objective is this that when i uplod a file it should be desply on same page with ajax uplod after when i refresh page this should be not remains longer and on clicking other image its replase previous image

plz help

how i can do this the code i have found is here

--------------------------------------index.php----------------------------------------------------
Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head>
  3. <title>Asynchronous image file upload without AJAX</title>
  4. <style>
  5. iframe {
  6. border-width: 0px;
  7. height: 60px;
  8. width: 400px;
  9. }
  10. iframe.hidden {
  11. visibility: hidden;
  12. width:0px;
  13. height:0px;
  14. }
  15.  
  16. #main {
  17. overflow: hidden;
  18. margin: auto;
  19. width: 720px;
  20. height: 500px;
  21. background-color: white;
  22. }
  23.  
  24. #images {
  25. width: 390px;
  26. margin: 20px;
  27. }
  28.  
  29. #images div {
  30. margin: 10px;
  31. width: 100px;
  32. height: 100px;
  33. float: left;
  34. overflow: hidden;
  35. }
  36.  
  37. #images div:hover {
  38. border-color: #529EBD;
  39. }
  40.  
  41. #images img.load {
  42. margin: 36px;
  43. }
  44. </style>
  45. </html>
  46. <body><center>
  47. <div id="main">
  48. <div id="iframe_container">
  49. <iframe src="upload.php" frameborder="0"></iframe>
  50. </div>
  51. <div id="images_container">
  52. </div>
  53. </div>
  54. </center></body>
  55. </html>
  56.  
  57.  
-----------------------------------------upload.php------------------------------------------------------
Expand|Select|Wrap|Line Numbers
  1. <?php
  2. error_reporting(E_ALL);
  3. if (isset($_FILES['image'])) {
  4. $ftmp = $_FILES['image']['tmp_name'];
  5. $oname = $_FILES['image']['name'];
  6. $fname = "upload/".$_FILES['image']['name'];
  7. if(move_uploaded_file($ftmp, $fname)){
  8. ?>
  9. <html><head><script>
  10. var par = window.parent.document;
  11. var images = par.getElementById('images_container');
  12. var imgdiv = images.getElementsByTagName('div')[<?=(int)$_POST['imgnum']?>];
  13. var image = imgdiv.getElementsByTagName('img')[0];
  14. imgdiv.removeChild(image);
  15. var image_new = par.createElement('img');
  16. image_new.src = 'resize.php?pic=<?=$oname?>';
  17. image_new.className = 'loaded';
  18. imgdiv.appendChild(image_new);
  19. </script></head>
  20. </html>
  21. <?php
  22. exit();
  23. }
  24. }
  25. ?><html><head>
Expand|Select|Wrap|Line Numbers
  1. <script language="javascript">
  2. function upload(){
  3. var par = window.parent.document;
  4.  
  5. // hide old iframe
  6. var iframes = par.getElementsByTagName('iframe');
  7. var iframe = iframes[iframes.length - 1];
  8. iframe.className = 'hidden';
  9.  
  10. // create new iframe
  11. var new_iframe = par.createElement('iframe');
  12. new_iframe.src = 'upload.php';
  13. new_iframe.frameBorder = '0';
  14. par.getElementById('iframe_container').appendChild (new_iframe);
  15.  
  16. // add image progress
  17. var images = par.getElementById('images_container');
  18. var new_div = par.createElement('div');
  19. var new_img = par.createElement('img');
  20. new_img.src = 'indicator.gif';
  21. new_img.className = 'load';
  22. new_div.appendChild(new_img);
  23. images.appendChild(new_div);
  24.  
  25. // send
  26. var imgnum = images.getElementsByTagName('div').length - 1;
  27. document.iform.imgnum.value = imgnum;
  28. setTimeout(document.iform.submit(),5000);
  29. }
  30. </script>
Expand|Select|Wrap|Line Numbers
  1. <style>
  2. #file {
  3. width: 350px;
  4. }
  5. </style>
  6. <head><body><center>
  7. <form name="iform" action="" method="post" enctype="multipart/form-data">
  8. <input id="file" type="file" name="image" onChange="upload()" />
  9. <input type="hidden" name="imgnum" />
  10. </form>
  11. </center></html>
  12.  


----------------------------------------resize.php-----------------------------------------------
Expand|Select|Wrap|Line Numbers
  1. <?php
  2. if($_GET['pic']){
  3. $img = new img('upload/'.$_GET['pic']);
  4. $img->resize();
  5. $img->show();
  6. }
  7.  
  8. class img {
  9.  
  10. var $image = '';
  11. var $temp = '';
  12.  
  13. function img($sourceFile){
  14. if(file_exists($sourceFile)){
  15. $this->image = ImageCreateFromJPEG($sourceFile);
  16. } else {
  17. $this->errorHandler();
  18. }
  19. return;
  20. }
  21.  
  22. function resize($width = 100, $height = 100, $aspectradio = true){
  23. $o_wd = imagesx($this->image);
  24. $o_ht = imagesy($this->image);
  25. if(isset($aspectradio)&&$aspectradio) {
  26. $w = round($o_wd * $height / $o_ht);
  27. $h = round($o_ht * $width / $o_wd);
  28. if(($height-$h)<($width-$w)){
  29. $width =& $w;
  30. } else {
  31. $height =& $h;
  32. }
  33. }
  34. $this->temp = imageCreateTrueColor($width,$height);
  35. imageCopyResampled($this->temp, $this->image,
  36. 0, 0, 0, 0, $width, $height, $o_wd, $o_ht);
  37. $this->sync();
  38. return;
  39. }
  40.  
  41. function sync(){
  42. $this->image =& $this->temp;
  43. unset($this->temp);
  44. $this->temp = '';
  45. return;
  46. }
  47.  
  48. function show(){
  49. $this->_sendHeader();
  50. ImageJPEG($this->image);
  51. return;
  52. }
  53.  
  54. function _sendHeader(){
  55. header('Content-Type: image/jpeg');
  56. }
  57.  
  58. function errorHandler(){
  59. echo "error";
  60. exit();
  61. }
  62.  
  63. function store($file){
  64. ImageJPEG($this->image,$file);
  65. return;
  66. }
  67.  
  68. function watermark($pngImage, $left = 0, $top = 0){
  69. ImageAlphaBlending($this->image, true);
  70. $layer = ImageCreateFromPNG($pngImage); 
  71. $logoW = ImageSX($layer); 
  72. $logoH = ImageSY($layer); 
  73. ImageCopy($this->image, $layer, $left, $top, 0, 0, $logoW, $logoH); 
  74. }
  75. }
  76. ?>
---------------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------
i think resize.php is not necessary for my purpose
Sep 5 '07 #1
1 3660
pbmods
5,821 Expert 4TB
Heya, Sandeep. Welcome to TSDN!

Please use CODE tags when posting source code. See the REPLY GUIDELINES on the right side of the page next time you post.

Changed thread title to better describe the problem (did you know that threads whose titles do not follow the Posting Guidelines actually get FEWER responses?).
Sep 5 '07 #2

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

2 posts views Thread by Willoughby Bridge | last post: by
2 posts views Thread by Chuck | last post: by
reply views Thread by wasif | last post: by
1 post views Thread by pritisolank | last post: by
3 posts views Thread by Ken1 | last post: by
3 posts views Thread by dreamznatcher | last post: by
6 posts views Thread by ramg80 | last post: by
reply views Thread by gheharukoh7 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.