By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
428,997 Members | 1,657 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 428,997 IT Pros & Developers. It's quick & easy.

AJAX file upload script replaces existing images

P: 2
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
Share this Question
Share on Google+
1 Reply


pbmods
Expert 5K+
P: 5,821
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.