0

i want to make a photo uploader page...that uploads photo and display it in the same page...but i also have one more problem...i don't want page to be refreshed...because i have other controls in that page....can u give an idea how to do so???

3
Contributors
14
Replies
31
Views
6 Years
Discussion Span
Last Post by kaore
Featured Replies
  • 1
    diafol 3,669   6 Years Ago

    OK, I've been playing and have this for you: [CODE]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <link href="/uploadify/uploadify.css" type="text/css" rel="stylesheet" /> <script type="text/javascript" src="/uploadify/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="/uploadify/swfobject.js"></script> <script type="text/javascript" src="/uploadify/jquery.uploadify.v2.1.4.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#file_upload').uploadify({ 'uploader' : '/uploadify/uploadify.swf', 'script' … Read More

0

Ajax uploader and ajax update. Quite a few about now actually. Like the idea. May have a pop at it myself.

I assume you need a callback function when the upload is completed 'cos as you know ajax is asynchronous, and using synch. ajax kinda defeats the object / causes hanging.

The jQuery uploadify looks good: http://www.uploadify.com

It has an OnAllComplete function, which should allow you to update a slideshow or whatever.

Edited by diafol: n/a

0

@ardav-yes after uploading i want to display the image in the same page ......could u help me how to do that...thought of doing with ajax..but i m not at all familiar with ajax....could u help me in this....

0

@ardav-i think so u missunderstood my question....
i want to display the image as soon as it is uploaded in the same page....
uploading is not a problem....i want to display also in the same page.....

0

So?

You know where the file is uploaded. You know the name, so use JS to insert an <img> tag with the url of the newly uploaded image.

Are you talking about the image appearing for everybody or just the uploader? If everybody, you need to set a TimeOut to periodically check upload status - be easier if you use a DB for this, hold a last_upload time. This can be intensive though.

The reason I mentioned uploadify if that it already contains info about the image being uploaded, so that you can use the OnAllComplete to fire off an append image to the page.

Edited by diafol: n/a

0

@ardav-look at my code n help what can i do....
I want to display image only for uploader ,after uploading image....it must show him like a preview.....

<html>
<head>
<title>
Voting
</title>
<style type="text/css">
div.header{
padding: 10px;
position :absolute;
width :780px;
left: 50px;
height :60px;
text-align: center;
border :1px dashed orange;
}
div.left {

padding: 10px;
position: absolute;
left: 50px;
top: 100px;
width: 500px;
height: 400px;
border: 1px dashed orange;
}
div.right {
padding: 10px;
position: absolute;
left: 580px;
top: 100px;
width: 250px;
height: 400px;
border: 1px dashed orange;
}
</style>
</head>
<body>
<div class="header">
VOTING SYSTEM
</div>
<div class="left">
<form action="partyshow.php" method="POST">
Party Name &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" name="party"><br/>
Unique Reg number &nbsp;<input type="text" name="u_reg"><br/>
Party Symbol &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input  type="text" name="sym"><br/>
Party Type &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<select name="type" style="height: 22px; width: 145px">>
<option>National</option>
<option>Local</option>
<option>Others</option>
</select><br/>
<center>
<input type="submit" value="Submit">
</center>
</form>
</div>
<div class="right">

<?php
//51
echo "Party Symbol<br/>";
if(isset($_FILES["file"]["name"]))
  {
  if (file_exists("./images/" . $_FILES["file"]["name"]))
      {
      echo "<img src='"."./images/" . $_FILES["file"]["name"]."' width='100px' height='100px' border='2'>";
      }
    else
      {
      move_uploaded_file($_FILES["file"]["tmp_name"],
      "./images/" . $_FILES["file"]["name"]);
      //echo "Stored in: " . "./images/" . $_FILES["file"]["name"];
      echo "<img src='"."./images/" . $_FILES["file"]["name"]."' width='100px' height='100px' border='2'>";
      
	}  


   }
else
{

?>
<img src="./images/errer.jpg" width='100px' height='100px' border="2">
<form action="" method="POST" enctype="multipart/form-data">
<input type="file" name="file" id="file" value="upload"><br/>
<input type="submit" value="submit">
</form>
<?php
}
?>
</div>
</body>
</html>

although this is showing but the problem with this is- It is submitting data and so all other control data are removed...plz help me out.....

Edited by tomato.pgn: n/a

0

Let me get this right, you don't want to use Ajax?

You have an upload form which sends to itself (causing reload). You then want the image to appear next to the form or wherever. THis doesn't require any Ajax.

If so:

if(isset($_FILES["file"]["tmp_name"])){
		if(!move_uploaded_file($_FILES['file']['tmp_name'],"/uploads/{$_FILES['file']['name']}"){
			$load = 0;
		}else{
			$load = 1;
		}
	}else{
		$load = 2;
	}
	$img_array = array("bad_upload.png",$_FILES['file']['name'],"no_upload.php");
	$img = array[$load];

Then

<img src="/uploads/<?php echo $img;?>" width="100" height="100" border="2" />

Edited by diafol: n/a

0

@ardav-I can use ajax...but i don't know it very well so i need ur help how to do that using ajax....
this program i made is causing reload..but i don't want reload.....
any other way to do that?????

0

You told me the file upload was fine. Well, that's the thing causing upload (form submission). That's why I suggested a grown up loader like uploadify.

If you use it, get it to work, then have a fiddle with OnAllComplete. If you get stuck with it, come back.

Coding a replacement for a file upload widget is no trivial matter.

1

OK, I've been playing and have this for you:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<link href="/uploadify/uploadify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="/uploadify/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="/uploadify/swfobject.js"></script>
<script type="text/javascript" src="/uploadify/jquery.uploadify.v2.1.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
  $('#file_upload').uploadify({
    'uploader'  : '/uploadify/uploadify.swf',
    'script'    : '/uploadify/uploadify.php',
    'cancelImg' : '/uploadify/cancel.png',
    'folder'    : '/uploads',
	'onComplete'  : function(event, ID, fileObj, response, data) {
      showPic(fileObj.name);
    },
    'auto'      : true
  });
});
function showPic(pic){
	$("#img").attr("src", "uploads/" + pic);
}
</script>
</head>

<body>

<img id="img" src="uploads/defaultimage.jpg" width="100" height="100" />
<form method="post" enctype="multipart/form-data">
<input type="file" id="file_upload" name="file_upload" />
<input type="submit" />
</form>
</body>
</html>

You need to download the Uploadify-v2.1.4.zip version and extract the files to uploadify folder in root.

0

Ok, I saw a problem with this. Do this at the appropriate place:

$(document).ready(function() {
  $('#file_upload').uploadify({
    'uploader'  : '/uploadify/uploadify.swf',
    'script'    : '/uploadify/uploadify.php',
    'cancelImg' : '/uploadify/cancel.png',
    'folder'    : '/uploads',
	'onComplete'  : function(event, ID, fileObj, response, data) {
      $("#img").attr("src", "uploads/" + fileObj.name);
    },
    'auto'      : true
  });
});

forget the function call - do a direct change of attribute.

See it in action here: http://www.screencast.com/users/diafol/folders/Jing/media/ca2abb91-f304-4aa7-b9d2-bb0a120af93f

Edited by diafol: n/a

0

ok found the error in ur code.....
It's working now....

function showPic(pic){
	$("#img").attr("src", "uploads/" + pic);
}

It should be...

function showPic(pic){
	$("#img").attr("src", "/uploads/" + pic);
}
Thanks for help ardav...u helped me a lot in this problem....
This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.