file upload using ajax and php | Newbie | | Join Date: Sep 2007
Posts: 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
|  | Lives Here | | Join Date: Jan 2007 Location: India (West-Bengal)
Posts: 2,451
| | | re: file upload using ajax and php Quote:
Originally Posted by kksandeep 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.
|  | Site Moderator | | Join Date: Nov 2006 Location: UK
Posts: 14,581
| | | re: file upload using ajax and php
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? Quote:
[html]<title>Asynchronous image file upload without AJAX</title>[/html]
|  | Site Moderator | | Join Date: Apr 2007 Location: Texas
Posts: 5,435
| | | re: file upload using ajax and php
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.
|  | Similar JavaScript / Ajax / DHTML bytes | | | /bytes/about
We are a network of experts and professionals in IT and software development that help one another with answers to tough questions and share insights.
Get the best answers to your questions from over 226,471 network members.
|