473,394 Members | 1,507 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,394 software developers and data experts.

file upload using ajax and php

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----------------------------------------------------
[HTML]<html>
<head>
<title>Asynchronous image file upload without AJAX</title>
<style>
iframe {
border-width: 0px;
height: 60px;
width: 400px;
}
iframe.hidden {
visibility: hidden;
width:0px;
height:0px;
}

#main {
overflow: hidden;
margin: auto;
width: 720px;
height: 500px;
background-color: white;
}

#images {
width: 390px;
margin: 20px;
}

#images div {
margin: 10px;
width: 100px;
height: 100px;
float: left;
overflow: hidden;
}

#images div:hover {
border-color: #529EBD;
}

#images img.load {
margin: 36px;
}
</style>
</html>
<body><center>
<div id="main">
<div id="iframe_container">
<iframe src="upload.php" frameborder="0"></iframe>
</div>
<div id="images_container">
</div>
</div>
</center></body>
</html>

[/HTML]
-----------------------------------------upload.php------------------------------------------------------
[PHP]
<?php
error_reporting(E_ALL);
if (isset($_FILES['image'])) {
$ftmp = $_FILES['image']['tmp_name'];
$oname = $_FILES['image']['name'];
$fname = "upload/".$_FILES['image']['name'];
if(move_uploaded_file($ftmp, $fname)){
?>
<html><head><script>
var par = window.parent.document;
var images = par.getElementById('images_container');
var imgdiv = images.getElementsByTagName('div')[<?=(int)$_POST['imgnum']?>];
var image = imgdiv.getElementsByTagName('img')[0];
imgdiv.removeChild(image);
var image_new = par.createElement('img');
image_new.src = 'resize.php?pic=<?=$oname?>';
image_new.className = 'loaded';
imgdiv.appendChild(image_new);
</script></head>
</html>
<?php
exit();
}
}
?>[/PHP][HTML]<html><head>
<script language="javascript">
function upload(){
var par = window.parent.document;

// hide old iframe
var iframes = par.getElementsByTagName('iframe');
var iframe = iframes[iframes.length - 1];
iframe.className = 'hidden';

// create new iframe
var new_iframe = par.createElement('iframe');
new_iframe.src = 'upload.php';
new_iframe.frameBorder = '0';
par.getElementById('iframe_container').appendChild (new_iframe);

// add image progress
var images = par.getElementById('images_container');
var new_div = par.createElement('div');
var new_img = par.createElement('img');
new_img.src = 'indicator.gif';
new_img.className = 'load';
new_div.appendChild(new_img);
images.appendChild(new_div);

// send
var imgnum = images.getElementsByTagName('div').length - 1;
document.iform.imgnum.value = imgnum;
setTimeout(document.iform.submit(),5000);
}
</script>
<style>
#file {
width: 350px;
}
</style>
<head><body><center>
<form name="iform" action="" method="post" enctype="multipart/form-data">
<input id="file" type="file" name="image" onChange="upload()" />
<input type="hidden" name="imgnum" />
</form>
</center></html>[/HTML]




----------------------------------------resize.php-----------------------------------------------

[PHP]<?php
if($_GET['pic']){
$img = new img('upload/'.$_GET['pic']);
$img->resize();
$img->show();
}

class img {

var $image = '';
var $temp = '';

function img($sourceFile){
if(file_exists($sourceFile)){
$this->image = ImageCreateFromJPEG($sourceFile);
} else {
$this->errorHandler();
}
return;
}

function resize($width = 100, $height = 100, $aspectradio = true){
$o_wd = imagesx($this->image);
$o_ht = imagesy($this->image);
if(isset($aspectradio)&&$aspectradio) {
$w = round($o_wd * $height / $o_ht);
$h = round($o_ht * $width / $o_wd);
if(($height-$h)<($width-$w)){
$width =& $w;
} else {
$height =& $h;
}
}
$this->temp = imageCreateTrueColor($width,$height);
imageCopyResampled($this->temp, $this->image,
0, 0, 0, 0, $width, $height, $o_wd, $o_ht);
$this->sync();
return;
}

function sync(){
$this->image =& $this->temp;
unset($this->temp);
$this->temp = '';
return;
}

function show(){
$this->_sendHeader();
ImageJPEG($this->image);
return;
}

function _sendHeader(){
header('Content-Type: image/jpeg');
}

function errorHandler(){
echo "error";
exit();
}

function store($file){
ImageJPEG($this->image,$file);
return;
}

function watermark($pngImage, $left = 0, $top = 0){
ImageAlphaBlending($this->image, true);
$layer = ImageCreateFromPNG($pngImage);
$logoW = ImageSX($layer);
$logoH = ImageSY($layer);
ImageCopy($this->image, $layer, $left, $top, 0, 0, $logoW, $logoH);
}
}
?>
[/PHP]
---------------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------
i think resize.php is not necessary for my purpose
Sep 5 '07 #1
3 4462
dmjpro
2,476 2GB
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----------------------------------------------------
<html>
<head>
<title>Asynchronous image file upload without AJAX</title>
<style>
iframe {
border-width: 0px;
height: 60px;
width: 400px;
}
iframe.hidden {
visibility: hidden;
width:0px;
height:0px;
}

#main {
overflow: hidden;
margin: auto;
width: 720px;
height: 500px;
background-color: white;
}

#images {
width: 390px;
margin: 20px;
}

#images div {
margin: 10px;
width: 100px;
height: 100px;
float: left;
overflow: hidden;
}

#images div:hover {
border-color: #529EBD;
}

#images img.load {
margin: 36px;
}
</style>
</html>
<body><center>
<div id="main">
<div id="iframe_container">
<iframe src="upload.php" frameborder="0"></iframe>
</div>
<div id="images_container">
</div>
</div>
</center></body>
</html>


-----------------------------------------upload.php------------------------------------------------------

<?php
error_reporting(E_ALL);
if (isset($_FILES['image'])) {
$ftmp = $_FILES['image']['tmp_name'];
$oname = $_FILES['image']['name'];
$fname = "upload/".$_FILES['image']['name'];
if(move_uploaded_file($ftmp, $fname)){
?>
<html><head><script>
var par = window.parent.document;
var images = par.getElementById('images_container');
var imgdiv = images.getElementsByTagName('div')[<?=(int)$_POST['imgnum']?>];
var image = imgdiv.getElementsByTagName('img')[0];
imgdiv.removeChild(image);
var image_new = par.createElement('img');
image_new.src = 'resize.php?pic=<?=$oname?>';
image_new.className = 'loaded';
imgdiv.appendChild(image_new);
</script></head>
</html>
<?php
exit();
}
}
?><html><head>
<script language="javascript">
function upload(){
var par = window.parent.document;

// hide old iframe
var iframes = par.getElementsByTagName('iframe');
var iframe = iframes[iframes.length - 1];
iframe.className = 'hidden';

// create new iframe
var new_iframe = par.createElement('iframe');
new_iframe.src = 'upload.php';
new_iframe.frameBorder = '0';
par.getElementById('iframe_container').appendChild (new_iframe);

// add image progress
var images = par.getElementById('images_container');
var new_div = par.createElement('div');
var new_img = par.createElement('img');
new_img.src = 'indicator.gif';
new_img.className = 'load';
new_div.appendChild(new_img);
images.appendChild(new_div);

// send
var imgnum = images.getElementsByTagName('div').length - 1;
document.iform.imgnum.value = imgnum;
setTimeout(document.iform.submit(),5000);
}
</script>
<style>
#file {
width: 350px;
}
</style>
<head><body><center>
<form name="iform" action="" method="post" enctype="multipart/form-data">
<input id="file" type="file" name="image" onChange="upload()" />
<input type="hidden" name="imgnum" />
</form>
</center></html>




----------------------------------------resize.php-----------------------------------------------

<?php
if($_GET['pic']){
$img = new img('upload/'.$_GET['pic']);
$img->resize();
$img->show();
}

class img {

var $image = '';
var $temp = '';

function img($sourceFile){
if(file_exists($sourceFile)){
$this->image = ImageCreateFromJPEG($sourceFile);
} else {
$this->errorHandler();
}
return;
}

function resize($width = 100, $height = 100, $aspectradio = true){
$o_wd = imagesx($this->image);
$o_ht = imagesy($this->image);
if(isset($aspectradio)&&$aspectradio) {
$w = round($o_wd * $height / $o_ht);
$h = round($o_ht * $width / $o_wd);
if(($height-$h)<($width-$w)){
$width =& $w;
} else {
$height =& $h;
}
}
$this->temp = imageCreateTrueColor($width,$height);
imageCopyResampled($this->temp, $this->image,
0, 0, 0, 0, $width, $height, $o_wd, $o_ht);
$this->sync();
return;
}

function sync(){
$this->image =& $this->temp;
unset($this->temp);
$this->temp = '';
return;
}

function show(){
$this->_sendHeader();
ImageJPEG($this->image);
return;
}

function _sendHeader(){
header('Content-Type: image/jpeg');
}

function errorHandler(){
echo "error";
exit();
}

function store($file){
ImageJPEG($this->image,$file);
return;
}

function watermark($pngImage, $left = 0, $top = 0){
ImageAlphaBlending($this->image, true);
$layer = ImageCreateFromPNG($pngImage);
$logoW = ImageSX($layer);
$logoH = ImageSY($layer);
ImageCopy($this->image, $layer, $left, $top, 0, 0, $logoW, $logoH);
}
}
?>

---------------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------
i think resize.php is not necessary for my purpose
Please use Code Tags while you do Post.

Kind regards,
Dmjpro.
Sep 5 '07 #2
acoder
16,027 Expert Mod 8TB
I've added the code tags for you. In future, read the Guidelines that appear on the right while posting.

Look at the title of the HTML/PHP file. What does it say?
[html]<title>Asynchronous image file upload without AJAX</title>[/html]
Sep 5 '07 #3
pbmods
5,821 Expert 4TB
If the new images are replacing the old images, then this is a server-side problem.

Please direct all new posts to the sister thread in the PHP forum:
http://www.thescripts.com/forum/thread703328.html

This thread is now closed.
Sep 5 '07 #4

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

12
by: JMB | last post by:
Hello, I was wondering if anyone knew of any projects extending the inline upload progress bar to utilize an inpage image uploader with bar, without having to refresh or go to a seperate page,...
1
by: Grzegorz ¦lusarek | last post by:
Hi all. I have situation that i use layers in my site and have to upload file from form on that layer. I try used AJAX it failed, when I do standard submit it's failed too, so I hear that solution...
6
by: Marko Vuksanovic | last post by:
I am trying to implement a file upload progress indicator (doesn't have to be a progress bar) using atlas... I do realize that the indicator cannot be implemented using Update panel control, but is...
4
by: SammyBar | last post by:
Hi all, I wonder is it possible to upload the content of an <imgfield to a server. The content of the <imgwas downloaded from a web site different from the one it should be uploaded. The image...
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...
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...
1
by: kksandeep | last post by:
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 ...
1
by: gamernaveen | last post by:
Hey guys , am just getting into the AJAX scene and am a noob. I am really worried about Ajax upload , cant figure it out. I have a basic html form , like this <form action="upload.php"...
11
by: kj | last post by:
I would like to convert a form that currently uses the traditional CGI sequence (i.e. the action associated with the form sends a POST request to a server-side CGI script) to one that uses AJAX to...
0
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
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
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
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...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
0
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...

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.