469,647 Members | 1,803 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

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

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 4229
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 discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

1 post views Thread by Grzegorz ¦lusarek | last post: by
6 posts views Thread by Marko Vuksanovic | last post: by
3 posts views Thread by dreamznatcher | last post: by
1 post views Thread by gamernaveen | last post: by
11 posts views Thread by kj | 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.