Databases
StackOverflow2013
Postsdbo
POajax image upload and preview form
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POajax image upload and preview form
    text
    copied!<p>Im using a script to out put uploaded image preview. It works fine. i just like to show the image in one div and error or success massage in another div. is there any chance to do this? Here is the code.</p> <p>Java script</p> <pre><code>&lt;script type="text/javascript"&gt; $(document).ready(function(){ $('#photoimg').live('change', function(){ $("#preview").html(''); $("#preview").html('&lt;img src="loader.gif" alt="Uploading...."/&gt;'); $("#imageform").ajaxForm( { target: '#preview' }).submit(); }); }); &lt;/script&gt; </code></pre> <p>HTML Code</p> <pre><code>&lt;?php include('db.php'); session_start(); $session_id='1'; // User login session value ?&gt; &lt;div id="output"&gt;&lt;/div&gt; &lt;form id="imageform" method="post" enctype="multipart/form-data" action='ajaximage.php'&gt; Upload image &lt;input type="file" name="photoimg" id="photoimg" /&gt; &lt;/form&gt; &lt;div id='preview'&gt; &lt;/div&gt; </code></pre> <p>PHP Code</p> <pre><code>include('db.php'); session_start(); $session_id='1'; // User session id $path = "uploads/"; $valid_formats = array("jpg", "png", "gif", "bmp","jpeg"); if(isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST") { $name = $_FILES['photoimg']['name']; $size = $_FILES['photoimg']['size']; if(strlen($name)) { list($txt, $ext) = explode(".", $name); if(in_array($ext,$valid_formats)) { if($size&lt;(1024*1024)) // Image size max 1 MB { $actual_image_name = time().$session_id.".".$ext; $tmp = $_FILES['photoimg']['tmp_name']; if(move_uploaded_file($tmp, $path.$actual_image_name)) { mysql_query("UPDATE users SET profile_image='$actual_image_name' WHERE uid='$session_id'"); echo "&lt;img src='uploads/".$actual_image_name."' class='preview'&gt;"; echo "&lt;span class=ok-msg"&gt;Image has been uploaded..!&lt;/span&gt;"; } else echo "&lt;span class=error-msg"&gt;failed&lt;span&gt;"; } else echo "&lt;span class=error-msg"&gt;Image file size max 1 MB&lt;/span&gt;"; } else echo "&lt;span class=error-msg"&gt;Invalid file format..&lt;/span&gt;"; } else echo "&lt;span class=error-msg"&gt;Please select image..!&lt;/span&gt;"; exit; } </code></pre> <p>I like to show all the massages (error-msg, ok-msg) and in the div output and image in the same place div preview. can anyone tell me how to do this. thanks in advance.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload