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???
tomato.pgn -6 Posting Whiz in Training
diafol
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.
tomato.pgn -6 Posting Whiz in Training
@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....
diafol
I edited the post while you were writing, I came across uploadify. What do you think?
tomato.pgn -6 Posting Whiz in Training
@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.....
diafol
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.
tomato.pgn -6 Posting Whiz in Training
@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 <input type="text" name="party"><br/>
Unique Reg number <input type="text" name="u_reg"><br/>
Party Symbol <input type="text" name="sym"><br/>
Party Type <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.....
diafol
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" /> tomato.pgn -6 Posting Whiz in Training
@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?????
diafol
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.
diafol
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.
diafol
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
tomato.pgn -6 Posting Whiz in Training
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.... diafol
OK we posted at the same time (I edited). Hop you see the link for a screencast.
kaore 0 Newbie Poster
You don't need jquery or ajax to do this.. Here is a description how: http://tech.cibul.net/upload-and-display-an-image-without-a-page-refresh/
Be a part of the DaniWeb community
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.