Ajax Image Upload without Refreshing Page using Jquery.
Wall Script
Follow Me:
Monday, August 22, 2011

Ajax Image Upload without Refreshing Page using Jquery.

Are you looking for ajax file/image upload and preview without refreshing page using Jquery. I had implemented this ajax form submitting using jquery.form plugin and used Arun Shekar's image cropping PHP code for uploading images. Just five lines of JavaScript code, Using this you can upload files, image and videos.

Ajax Image Upload without Refreshing Page with Jquery and PHP


Download Script     Live Demo

Javascript Code
$("#photoimg").live('change',function(){})- photoimg is the ID name of INPUT FILE tag and $('#imageform').ajaxForm() - imageform is the ID name of FORM. While changing INPUT it calls FORM submit without refreshing page using ajaxForm() method.  
<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="jquery.form.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$('#photoimg').live('change', function()
{
$("#preview").html('');
$("#preview").html('<img src="loader.gif" alt="Uploading...."/>');
$("#imageform").ajaxForm(
{
target: '#preview'
}).submit();
});
});
</script>

index.php
Contains simple PHP and HTML code. Here $session_id=1 means user id session value.
<?php
include('db.php');
session_start();
$session_id='1'; // User login session value
?>

<form id="imageform" method="post" enctype="multipart/form-data" action='ajaximage.php'>
Upload image <input type="file" name="photoimg" id="photoimg" />
</form>

<div id='preview'>
</div>

Sample database design for Users.

Users
Contains user details username, password, email, profile_image and profile_image_small etc.
CREATE TABLE `users` (
`uid` int(11) AUTO_INCREMENT PRIMARY KEY,
`username` varchar(255) UNIQUE KEY,
`password` varchar(100),
`email` varchar(255) UNIQUE KEY,
`profile_image` varchar(200),
`profile_image_small` varchar(200),
)

ajaximage.php
Contains PHP code. This script helps you to upload images into uploads folder. Image file name rename into timestamp+session_id.extention
<?php
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<(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))
{
mysqli_query($db,"UPDATE users SET profile_image='$actual_image_name' WHERE uid='$session_id'");
echo "<img src='uploads/".$actual_image_name."' class='preview'>";
}
else
echo "failed";
}
else
echo "Image file size max 1 MB";
}
else
echo "Invalid file format..";
}
else
echo "Please select image..!";
exit;
}
?>

db.php
Database configuration file, modify username, password, database and base url values.
<?php
define('DB_SERVER', 'localhost');
define('DB_USERNAME', 'username');
define('DB_PASSWORD', 'password');
define('DB_DATABASE', 'database');
$db = mysqli_connect(DB_SERVER,DB_USERNAME,DB_PASSWORD,DB_DATABASE);
?>
Was this article helpful?
Thanks! Your feedback helps us to improve 9lessons.info


267 comments:

  1. Wow, this is amazing, it works! :)

    ReplyDelete
  2. thx..
    this is what i'm looking for..

    ReplyDelete
  3. tutorial no found
    http://analytics.hosting24.com/high_cpu.htmlajaximageupload/

    ReplyDelete
  4. "Live Demo" and "Download Script" links not working

    ReplyDelete
  5. demo link not working...

    ReplyDelete
  6. 404 error on demo page !!!

    ReplyDelete
  7. Problem with Hosting server overload please try after 5 min.

    Soon I will move demos to Cloud hosting..

    ReplyDelete
  8. Great, I was looking for something like this and found the Uploadify, but it uses flash as a part of it. This is better than that :)

    ReplyDelete
  9. With image description how can i do ????

    ReplyDelete
  10. With image description how can i do ????

    ReplyDelete
  11. You will have issue with this line, list($txt, $ext) = explode(".", $name);, is the file base name is with multiple dots(as in this-is-a-file.with-dot.png)

    so use this to get the file extension instead:
    $fileExt = substr(strrchr($fileName, '.'), 0);

    ReplyDelete
  12. I keep getting an fail error message , when ever i uploaded a picture, can't find the problem. any help appreciated.

    ";
    }
    else
    echo "failed";
    }
    else
    echo "Image file size max 2 MB";
    }
    else
    echo "Invalid file format..";
    }
    else
    echo "Please select image..!";
    exit;
    }
    ?>

    ReplyDelete
  13. Hi, thank you, I have a Question about http://www.9lessons.info/2009/06/autosuggestion-with-jquery-ajax-and-php.html

    How can I do, try to select one result with keyword and the ENTER key? like Facebook I can in facebook navegate the results with the arrow of keywords

    Thank You !

    ReplyDelete
  14. good work !
    thanks !!

    ReplyDelete
  15. Yeah sehr geil vielen vielen Dank dafür ;)

    ReplyDelete
  16. Hi Srinivas,

    First of all : Great script !
    I was looking for such a script !

    I’m implementing it on a site i’m working on, and I have just one question :

    Looking at your demo pages :
    How can I get the content of the var ‘$actual_image_name’ ( new filename ) displayed on the index page ( not the ajaximage.php ! ) ?
    Or, in other words, how can I send the var ‘$actual_image_name’ ( new filename ) back to the index page ?

    If I do an echo of the ‘$actual_image_name’ on the index page, it returns nothing ( empty )

    Thank you for your quick reply !
    Kind regards from the Netherlands,

    Erwin van Brink

    ReplyDelete
  17. Onchnage is not working in IE. Please check it and update the script

    ReplyDelete
  18. Hi Srinivas, Can I post new thread on this site? - Machhindra

    ReplyDelete
  19. Hi Srinivas ( or someone else --:} ),

    Could you please help me with my comment above?
    I really need this to work !
    Thanks !!!!

    Erwin van Brink

    ReplyDelete
  20. Very useful for me. Thanks a lot.

    ReplyDelete
  21. thank you so much! it works in IE too :)

    ReplyDelete
  22. I am Rescue, I am a complete noob, I want to be able to add the image name to a form and submit it to mysql, I dont know how, any help will be appreciated.

    ReplyDelete
  23. wen i crop the image .. it is not showing what i cropped particular area..

    ReplyDelete
  24. Just want to let you know that the program I told you that i will create to translate your article in french is ready. And i will start translation each article of your website and link to the original. So each time you will post an article i will translate it in french.

    You are great man. God bless you.

    ReplyDelete
  25. Thank you for these codes i selected a social network as my mini project

    ReplyDelete
  26. These tutorial is very interesting and easy to use..

    Hi All,

    Please help me I want to create a CMS in php with Ajax and jQuery I want a when we add and edit any content and any manager the all action are complete without page refreshing so please give me some source URL, whos help me.........

    ReplyDelete
  27. lease help me I want to create a CMS in php with Ajax and jQuery I want a when we add and edit any content and any manager the all action are complete without page refreshing so please give me some source UR

    ReplyDelete
  28. will this work if i set this for multiple uploads?

    ReplyDelete
  29. Huge thx !
    Do you think we can initiate o re-initiate jcrop once preview div is updated ?

    Keep on posting goods articles and thx again !

    ReplyDelete
  30. great work amazin stuffs dude really gooddd...

    ReplyDelete
  31. I've been doing ajax image upload using iframe.. It was actually a fake ajax image upload.. And now i found out that it's possible to do the ajax upload without iframe.. :D tnx men. Your the best!

    ReplyDelete
  32. very nice, congratulation.
    I wold know how to make a upload like this with a lot of images and delete any of then , like this one -
    http://www.ajax-image-editor.com/demo/

    can you show to uss?
    =)

    ReplyDelete
  33. Helo my friend, good work.
    Very easy implementation code,
    I wold like to know how to delete a image from server after upload , like this exemple -
    http://www.fyneworks.com/jquery/multiple-file-upload/#tab-Examples
    It is hard to make this?

    thanks

    ReplyDelete
  34. I need a code on php to capture picture/frame of video file(flv/swf/wmv) and store it in a separate folder while uploading the video file.

    I know you can help me out here.... your site is awesome.Please i need help on this.

    ReplyDelete
  35. Thanks allot sir!
    I use this on linktube dot net (index).

    Your credits remain in the codes

    ReplyDelete
  36. Waaaaaaaaw........amzing...it resolved my problem..thank you sooooooo much....

    ReplyDelete
  37. Hi Srinivas, if this dont work in IE, It is very hard to use, most of the users in my contrie navigates in IE, does have some way to make this work in ie?

    ReplyDelete
  38. Hi Shriniva, I did some test of your demo. It is very nice and helpful.

    Thanks....

    ReplyDelete
  39. Nice article, I use this technique in my project. So, how can I upload multi file without refreshing page by using ajax?

    ReplyDelete
  40. I have a table that is generated from a mysql db and I am trying to add this code so that I can upload an image for the individual rows. So far I have it creating a new form form imageform for each row and I am wanting to name then imageForm[1] imageForm[2] and so on. I will also do the same thing with the preview divs and also the photoimg button. But I am having trouble with how to have the ajax functions recognize the arrays that I have attached to each item. Is there a way to do this?

    ReplyDelete
  41. Dear Srinivas,

    Thnx a lot for your snippet. I have used it in my general coding..it is working perfect...

    But, I tried to implement it to the pages using SEO friendly URL's like http://sghss.com/works/designing/web/kishors-design-24/upload ... it won't work..

    I have refereed jquery.min.js and jquery.form.js in many ways...but still showing the same error '$' is not defined..how can i escape from it ? can you help me ? thnx in advance

    ReplyDelete
  42. how can i store username or email with fileupload ?

    ReplyDelete
  43. Very very nice script

    ReplyDelete
  44. If some1 get a sol to this error put it up here, Uncaught RangeError: Maximum call stack size exceeded

    ReplyDelete
  45. If someone gets a solution to the following error; please post it here. The error is:
    Uncaught RangeError: Maximum call stack size exceeded

    ReplyDelete
  46. thank you soo much man...you made my day...

    ReplyDelete
  47. Great work!!!
    nice!!

    but only one question!

    Does form plugin works with jquerymobile??

    i have tried its not working!

    please help me..

    ReplyDelete
  48. @Parikshit: Please! use latest version of jQuery to solve your problem. I also fixed mine this way.

    ReplyDelete
  49. Help Mee

    How To Make uid = ". $ _SESSION ['IdUser'];

    ReplyDelete
  50. Asalam-o-Alikum kindly help me how we can create a dymain editor e.g ckeditor,tinymse editor..but only using one texarea ...thanks regard nadia

    ReplyDelete
  51. Wow, really good script. But it would even be better if you could make it special, like under the preview image after uploading, its giving you the url, etc. domain.com/file/uploads/file.png

    would be epic!

    ReplyDelete
  52. Hi,

    Very Nice !!

    Is it possible to call a function when submit is complete ?
    Thank you

    ReplyDelete
  53. :-)

    It is ok !!

    $("#nameform").ajaxForm(
    {target: '#preview'},
    alert("Thank you for post")
    ).submit();

    Thank you !!

    ReplyDelete
  54. Nice tutorial, image uploading successfully, but can you please tell me after form submission why new window not shown ... new window shows in the uploaded image section maybe its the iframe issue ? Thanks

    ReplyDelete
  55. Nice tutorial !!!
    but like i'm really curious to know why the script didn't leave index page after submit ??
    Thanks !!

    ReplyDelete
  56. I keep receiving error "$("#imageform").ajaxForm is not a function". Once I select an image file to upload, the spinner starts but no image uploads or displays.

    ReplyDelete
  57. while trying demo i tried a trick!!


    i have image named a.mp3.jpg

    and

    music file named a.jpg.mp3

    when i tried to upload the image a.mp3.jpg

    "Invalid file format.." message was displayed

    but when i tried to upload music file a.jpg.mp3

    it was successfully uploaded..............

    It should not be done!

    please repair your image validation script......

    thank you!!!!!!!

    ReplyDelete
  58. perfect.. :)
    but how can i show the image in modal box??

    ReplyDelete
  59. Hey its ver nice one but its not working in ie can you please tell me how it will work in ie i am using Input type file without textbox its working in all instead of IE.

    ReplyDelete
  60. nice script.
    thank you very much

    ReplyDelete
  61. not working with ie.. tested on ie9

    ReplyDelete
  62. target: '#preview' is not working either

    ReplyDelete
  63. IE FIX
    change
    this.appendChild( elem );
    in you jqeury.js with
    this.parentNode.appendChild( elem );

    ReplyDelete
  64. Thanks,it's just great and quite simple, I spend the night looking around for some other solution... Reading many time that doing this is just impossible... Your solution is the lighter and more comprehensible for me than other heavy scripts I found ... (I'm not totally noob, but I like making things working with the less code lines I can for my brain health !! ).

    So thanks again, I just have two points :

    Why don't you just use this code
    $ext = substr($name, -3);
    instead of this one :
    list($txt, $ext) = explode(".", $name);
    Because your authorized extensions just have 3 letters and your code doesn't manage files using several dots like this one : mynicepic.2012holidays.jpg

    Second point that is more boring for me... Maybe it's a bit off the subject here, but usually I can manage it myself. I can make your code working by itself, but I didn't find a way to include it properly on my site. I mean, the form included as an include in my page doesn't point correctly an ajaximage.php and i got a 404 error. Is there a special things that I don't understand in your procedure or I'm just totally wrong about including people script ? I made this operation with a lots of scripts and form from myself or others, I've never had a 404 ! If you have few minutes to light my reflexions...

    Thanks.

    ReplyDelete
  65. if you want to call a function when submit completed, use option 'success'

    eg:

    $("#myForm").ajaxForm(
    {
    success: alert("completed")
    }).submit();

    ReplyDelete
  66. How to get the name of the file after submit? I can not get the result of the 'target' option to use as javascript variable. Please help me ...

    ReplyDelete
  67. my extensions here:
    $valid_formats = array("jpg", "png", "gif", "bmp","mp3")
    but why can't uploading mp3 file? Someone help me pls!

    ReplyDelete
  68. nice script.
    thank you very much

    ReplyDelete
  69. wow
    working perfect..
    thank you

    ReplyDelete
  70. hi there, first this code works perfect, thanks for sharing!! :) I'm looking for some way to change another form (input text value) to catch the just saved image path, any ideas?? thanks again!

    ReplyDelete
  71. HOW TO CATCH FILE NEW PATH
    Ok, here's the thing, this works fine to me:
    $('#imageform').bind('submit', function(e) {
    e.preventDefault(); // <-- important
    $(this).ajaxSubmit({
    target: '#preview',
    success: function() {
    $('#file').val($('#newimg').attr("src"));
    }
    });
    }).submit();

    ReplyDelete
  72. i execute your index.php file in that time i got this error = "Opps some thing went wrong"

    ReplyDelete
  73. Instead of this: list($txt,$ext)= explode(".",$name); use this: $ext = end(explode(".",$name)); it will grab the last value in the array

    ReplyDelete
  74. Thanks for the article. It solved a very old problem. Works great in all browsers.

    Realy Greattttttt!!!!!!!

    ReplyDelete
  75. I tried it but get this error:
    Warning: mysql_connect() [function.mysql-connect]: [2002] No such file or directory (trying to connect via unix:///var/mysql/mysql.sock) in /Library/WebServer/Documents/temp/ajaximage/db.php on line 7

    Warning: mysql_connect() [function.mysql-connect]: No such file or directory in /Library/WebServer/Documents/temp/ajaximage/db.php on line 7
    Opps some thing went wrong

    Can someone help please!

    ReplyDelete
  76. I have a suggestion. I think it would be better if the user name image name. as name_surname.jpg

    ReplyDelete
  77. perfect job, just perfect ! Thanks !

    ReplyDelete
  78. IE 9 Fix (works with ff,safari,chrome - did not test on opera)
    $(document).ready(function() {
    var options = {
    target: '#preview', // target element(s) to be updated with server response
    beforeSubmit: showRequest, // pre-submit callback
    success: showResponse // post-submit callback

    };
    $('#photoimg').live('change', function () {
    $('#imageform').submit(function() {
    $(this).ajaxSubmit(options);
    return false;
    }).submit();
    });
    });

    function showRequest(formData, jqForm, options) {
    //insert animated gif loading code here
    return true;
    }

    // post-submit callback
    function showResponse(responseText, statusText, xhr, $form) {
    //insert alert or whatsoever
    }

    ReplyDelete
  79. can any body provide this code in java????

    ReplyDelete
  80. i have try it... nice job... but is there any way to make loader that use percentage with jquery? cheer...

    ReplyDelete
  81. @zuka Soon I'm going to publish a tut about uploading file with percentage status

    ReplyDelete
  82. if(in_array(strtolower($ext),$valid_formats))

    Really nice Snippet ;)
    Use "strtolower" for support file extension as ".PNG" and ".png" or something like else ...

    ReplyDelete
  83. if(in_array(strtolower($ext),$valid_formats))

    Use "strtolower" for irgnoring case sensitive in file extensions.

    Thanks.

    ReplyDelete
  84. thanks Srinivas Tamada,

    This helps me a lot.

    But i have a problem.
    After image upload when i am trying to submit my parent form, it is not getting submitted.

    Please help me...

    Thanks in advance. :)

    ReplyDelete
  85. Hi I just started using Jquery,
    I tried to implement this plugin to upload an image but the i just find the the loader repeating.
    Nothing is happening, and i'm not getting any errors either

    can any one help

    ReplyDelete
  86. Hi I was looking for same functionality. Alot Thanks to you!!!

    ReplyDelete
  87. Thanks! Just what I needed and it works like a charm.

    ReplyDelete
  88. how would you allow multiple file upload?

    ReplyDelete
  89. a question
    how we can to post form data too ajaximage.php without action of form and with ajax
    and php file need to change ?

    ReplyDelete
  90. hello can any one tel me how to delete images that are saved in upload folder??????

    ReplyDelete
  91. Thanks very much for your code. Works like a charm on my local machine. Do you need any credit for its use on the web?

    Saved me loads of time, cheers.

    ReplyDelete
  92. Excellent stuff buddy, I was search for such a good implementation, thanks for sharing

    ReplyDelete
  93. thanks dear...i m searching such one.... thanks

    ReplyDelete
  94. Something weird is the script work great. but the file don't appear in the upload folder but the <img show the picture and the path is the same... after a while it's seem that the file appear but it take time. it's not the size problem because I use 100k image file.. someone know what's wrong?

    ReplyDelete
  95. W000000000000wwwwwwwwww This is Really an imaging !!!!!!!!!!!! ..
    I really want to thank that person who have done that ... thank you so much sir ...


    Regards: Pritam SIngh Bangalore

    ReplyDelete
  96. Thanks a lot...........

    ReplyDelete
  97. Thanks for code.

    About IE onchange problem - I used jquery-1.7.min.js and changed:

    $('#photoimg').live('change', function()

    to

    $('#photoimg').on('change', function()

    Now works fine on IE9!

    Many thanks for code!!

    ReplyDelete
  98. That's very impressive for my app... Thanks!

    ReplyDelete
  99. Hi Thansk for This code. i thanks you very much

    ReplyDelete
  100. Hello I use it. Simple and very useful. Thanks

    ReplyDelete
  101. this is what i have been looking for

    ReplyDelete
  102. Very urgent, After uploading image through ajax i want to submit the form. But when i click on submit button the form again submitted through ajax. How to enable original submit.

    ReplyDelete
  103. table not update the profile_image column

    ReplyDelete
  104. i already changed database name and column

    ReplyDelete
  105. Hi,Nice code...
    In the ajaxForm call you made, I want to pass some additional details..Any ideas how I can do it
    $("#form1").ajaxForm({ target: '#preview'
    }).submit();

    And Is there any way to check if The file input is empty or if has any file??

    ReplyDelete
  106. it is a very nice script, i have implemented it on a site........

    But there is a problem, After uploading the picture i submit the form again using submit button, the next page is shown in the "preview" div. I am changing the action like shown below when i submit using ajxForm and then make it again what i want. But the next page is shown in the target div. I want it to work normally and come on next page normally.


    Any help will be highly appreciated.

    Thank you1

    ReplyDelete
  107. i have implemented this script on my page but there is a problem. I want to submit this page manually also so that all other entries can also be done . after uploading the picture when i submit the form using submit button, Inspite of redirecting it shows the next page on the same page in the #preview div. I am changing the url for both submission like below.


    $('#photoimg').live('change',function() {
    $('form').get(0).setAttribute('action','picupload');


    $("#imageform").ajaxForm({
    target: '#preview'
    }).submit();


    $('form').get(0).setAttribute('action', '');

    });

    Thanks for any kind of help in advance

    ReplyDelete
  108. thanks guys.. this is really help me to solve image upload

    ReplyDelete
  109. My file is just stalling at uploading file...

    ReplyDelete
  110. Thanks your script worked great on all browsers and was the most lightweight script amongst the top 10 google search results for Ajax file upload script.

    Thanks again :)

    ReplyDelete
  111. Awesome tutorial! I LOVE using ajax, it makes the web seem like it's gliding.

    ReplyDelete
  112. thanks a lot.....

    ReplyDelete
  113. LOve the script .. just one issue found in IE8 need to click for start upload .. means automatic upload in not working...


    Thanks

    ReplyDelete
  114. hello.. I want to know? ? how to upload more images using same page..
    just like addend to new #preview div other images

    Uploads image

    3 image priview
    2 image priview
    1 image priview

    ReplyDelete
  115. Only supporting files with English name

    ReplyDelete
  116. Nice... everything is working perfectly...

    ReplyDelete
  117. Nice artical but page refresh problem when use

    ReplyDelete
  118. Great Script! So simple...
    Thanks

    ReplyDelete
  119. Great Script! So simple...
    Thanks

    ReplyDelete
  120. It does not work when it is a form within a form .....

    ReplyDelete
  121. i want to response in a veriable

    ReplyDelete
  122. Great post friend, working great

    ReplyDelete
  123. How do I get the code to display the picture? .. please is urgent

    ReplyDelete
  124. Anyone having problems running this in firefox - get error:

    $("#imageform").ajaxForm is not a function

    ReplyDelete
  125. Him
    I am using JSP and have an AJAX file upload.But I want to show a preview of the image he just uploaded without refreshing the page.How can I?

    ReplyDelete
  126. How it can make to the multiple file upload?

    ReplyDelete
  127. wow.....its nice. it was very helpful to me. thank you friend

    ReplyDelete
  128. hi i cant resize


    $name = $_FILES['photoimg']['name'];
    $size = $_FILES['photoimg']['size'];
    $uploadedfile = $_FILES['file']['tmp_name'];
    $src = imagecreatefromjpeg($uploadedfile);

    if(strlen($name))
    {
    list($txt, $ext) = explode(".", $name);
    list($width,$height)=getimagesize($uploadedfile); if(in_array($ext,$valid_formats))
    {
    if($size<(1024*1024))
    {
    $actual_image_name = time().substr(str_replace(" ", "_", $txt), 5).".".$ext;
    $tmp = $_FILES['photoimg']['tmp_name'];




    $newwidth=$width;
    $newheight=$height;
    $tmp=imagecreatetruecolor($newwidth,$newheight); if(move_uploaded_file($tmp, $path.$actual_image_name,0,0,0,0,$newwidth,$newheight,$width,$height))



    help pleaseeeeeeeeee :((

    ReplyDelete
  129. Awesome uploader sir...

    ReplyDelete
  130. hassan from morocco
    Hi
    i would give my best thanks for srinivas
    i would say "the indians aren't good just in films"
    really thanks U
    for mister Gatis if you want to be multi uploader

    ReplyDelete
  131. hassan from morocco
    Gatis this is the php code :
    ";
    }
    else
    echo "failed";
    }
    else
    echo "Image file size max 1 MB";
    }
    else
    echo "Invalid file format..";
    }

    else
    echo "Please select image..!";

    }
    }
    }
    ?>

    ReplyDelete
  132. hassan from morocco
    gatis this the html code :


    Upload image


    ReplyDelete
  133. How to upload multiple images?

    ReplyDelete
  134. Excellent script for which I thank you.

    One quick question I do not want to resize the image, how can I turn that functionality off?

    Thanks

    ReplyDelete
  135. Sorry forget that last question. I see that the image size is only controlled by the div.

    What I would like is a fixed size div with overflow set to scroll and the image displayed full size in that. Is there any way to achieve this? Sorry my knowledge of Javascript is 0. TIA

    ReplyDelete
  136. Is there any way to centre the image loading gif in the centre of the #preview div?

    ReplyDelete
  137. How can I add verification for file type and file size. It'd be good to have that.

    ReplyDelete
  138. I implemented this in 5 seconds and it worked beautifully.

    ReplyDelete
  139. you have a small error on the SQL table

    `profile_image_small` varchar(200),
    should be
    `profile_image_small` varchar(200)

    ReplyDelete
  140. Nice script but, it doesn't resize the image, can you help me please inorder to resize it?!

    ReplyDelete
  141. Hi can you tell me how I can increase the max size of the image -- This is a well written script otherwise.

    ReplyDelete
  142. Thanks a lot. This is what i was looking for...

    ReplyDelete
  143. THanks a lot. This is what i need to implement in my website.

    ReplyDelete
  144. How to use on complete function in this code

    ReplyDelete
  145. Hi, is there a way that the target div elements will remain and image will just append?

    Thanks

    ReplyDelete
  146. Hi all, is there a way that the elements of the target div will remain and the image will just append?

    ReplyDelete
  147. Hi, is there a way that the element of the target div will remain? and the image will just append.

    Thanks

    ReplyDelete
  148. sorry got it :) i edit the jquery.form.js! it is now appending, btw great tutorial (Y)

    ReplyDelete
  149. Thank you!! It's working perfectly! :)

    ReplyDelete
  150. save button missing

    ReplyDelete
  151. how do I add custom callback (like showing additional input or hiding file upload form) after the image is successfully uploaded?

    ReplyDelete
  152. nevermind, figured out already. thanks for sharing this. you're a good man.

    ReplyDelete
  153. Hi

    I am Rahul Jain.Script is Awesome,But i am facing some problem during implementation with IE.

    I am using jquery-1.7.1.min.js. But i am facing problem in IE browsers,

    I already used below two codes as per feedbacks:

    1) Replace the code this.appendChild(a) in my
    jquery-1.7.1.min.js with his.parentNode.appendChild(a)

    2) $('#photoimg').live('change', function() to
    $('#photoimg').on('change', function()

    Please help me, my email id is rahuljain1701@gmail.com

    Thanks

    ReplyDelete
  154. Tranks!
    He saved my life here. I'm from Brazil. Thanks!

    ReplyDelete
  155. Hi there
    I'm from Kurdistan, and I really appreciated
    many thanks

    ReplyDelete
  156. Hi Srinivar,

    Script is superb, but i am facing issue on implementation with IE.

    Please help.

    Thanks

    ReplyDelete
  157. Hi iam using struts2 i am able to upload a file using this script but as a response iam send json object to the jsp , iam unable to render the json the way i rendered for the remain actions in my app. and it is blocking some functionalities in ie6,ie7,ie8 , but in firefox its working fine.
    please help me this.
    thanks,
    Saran Kumar

    ReplyDelete
  158. Thank you thank you thank you!!! I'd like to rig it up to upload multiple images :) Thanks again!

    ReplyDelete
  159. Thanks for the tutorial.
    Question from a noob:
    This is possible if the form's action is ONLY upload an image. What if the form has a different action? I mean the form has other fields and not only an image.

    ReplyDelete
  160. After jQuery version 1.7 .live is deprecated and is replaced by .on

    Just in case you import the latest version of jQuery...

    ReplyDelete
  161. Thanks! This is very good. But can you please add a function for multiple images as many people have asked before?

    This would be really appreciated by lots of us.

    ReplyDelete
  162. hai everybody .i tried tis code but it not uploading images.i downloded this file

    http://malsup.github.com/jquery.form.js and included it also.stilits not working>dont kno y.

    ReplyDelete
  163. hai Srinivas Tamada i tried tis code on wamp PHP/5.3.13 dont kno y its not working.any help will be aprreciable.

    ReplyDelete

Make in India