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

file upload using ajax and php

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----------------------------------------------------
[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
Share this Question
Share on Google+
3 Replies


dmjpro
100+
P: 2,476
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
Expert Mod 15k+
P: 16,027
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
Expert 5K+
P: 5,821
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.