473,382 Members | 1,342 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,382 software developers and data experts.

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 3915
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

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

Similar topics

2
by: Willoughby Bridge | last post by:
I am having trouble with a file upload script. Have tried a lot of different methods and the problem boils down to the $_FILES variable not being picked up. Below is a simple example of...
2
by: Chuck | last post by:
Hi, can anyone provide or point me in the direction of a simple python file upload script? I've got the HTML form part going but simply putting the file in a directory on the server is what I'm...
1
by: fatjoez | last post by:
Hey there. I've been trying to modify my file upload script so that it handles 10 files instead of one. i was thinking the most straightforward way would be to add a FOR LOOP? placed...
3
by: markus.rietzler | last post by:
i want to do (multiple) file upload(s) and display a progress bar. with firefox and safari it is no problem at all. only IE makes some problems. my script is based on ajax-uploader, which can be...
0
by: wasif | last post by:
I am trying to upload file using ajax and php but having some problems. it always says that there was a problem and file is not uploaded. here is the code form and ajax code <!DOCTYPE html...
1
by: pritisolank | last post by:
Hello everyone, I am trying to do ajax file upload i am half way and now i don't find any way to reach :-( can someone tell me how to do a file upload in ajax+PHP. regards, priti
3
by: Ken1 | last post by:
Hello, Does anyone know of an easy to implement ajax upload script for php which also has a progress bar. If possible I'd like it to be able to remove already uploaded files and do minor...
3
by: dreamznatcher | last post by:
Hello, I found a script here: http://www.webtoolkit.info/ajax-file-upload.html which supposedly allows you to upload files using AJAX (I'm not an expert). The site claims it's the best way to...
6
by: ramg80 | last post by:
Hi, I m using ajax to upload a file. I m using servlets (MultipartFormDataRequest) to upload the file. My script contains the form data and the file. I m able to get the values of the form...
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: aa123db | last post by:
Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.