2
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
- <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>
Expand|Select|Wrap|Line Numbers
- <?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>
Expand|Select|Wrap|Line Numbers
- <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>
Expand|Select|Wrap|Line Numbers
- <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-----------------------------------------------
Expand|Select|Wrap|Line Numbers
- <?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
