Saturday 8 February 2014

Filled Under:

How To File Upload with Progress Bar using jQuery and PHP




          we have received many people requests who have visit my blog that ho wo create fileupload progressbar using php and jQuery.and in this post Bhavesh Bodar developed a some few line easy code using php and jQuery to upload file with percentage Progress Bar.here you can upload any file or unlimited file size without page refresh.


free download complate source code and example for this tutorial visit our official website 




http://easyscript4u.com/demo/file-upload-progress-bar

if you have any query or problem than you can freely contact easyscript4you@gmail.com.




20 comments:

  1. Instead of using php can we do this uploading with only jquery/ajax/html

    ReplyDelete
    Replies
    1. seems like you are looking for http://jsever.blogspot.in/ plugin, this is one of the cool plugin i have seen you can find the source code from here https://github.com/JSEver/JSAjaxFileUploader and its open source :) hope that helps

      Delete
  2. Dear pavan you can not uploading without php in this progress bar.

    ReplyDelete
  3. How to get extraData in controller?

    ReplyDelete
    Replies
    1. @Pavan seems like you are looking for http://jsever.blogspot.in/ plugin, this is one of the cool plugin i have seen you can find the source code from here https://github.com/JSEver/JSAjaxFileUploader and its open source :) hope that helps

      Delete
    2. @Anonymouse using this plugin https://github.com/JSEver/JSAjaxFileUploader you can also send extra form information and it has many more features too i'm using this in my project and it really simple to setup

      Delete
  4. How can I send the user to upload page instead of showing the page in index?

    ReplyDelete
    Replies
    1. Dear Ahmed,

      i am not understand what you mean ?

      Delete
    2. Here after uploading the user sees "File uploaded Success !" under the progress bar

      I need the user to be sent to the upload page where he sees "File uploaded Success !" only

      Delete
  5. This comment has been removed by the author.

    ReplyDelete
  6. that's exactly what I need it to do too... display the file upload success message on a new page, not underneath the form....is that possible.?

    ReplyDelete
    Replies
    1. I have found this way
      on your html tag add id like this
      id="full"
      add to the javascript
      var full = $('#full');
      at last replace
      status.html(xhr.responseText);

      with

      full.html(xhr.responseText);

      this will work correctly edit it as your own needs

      Delete
  7. Thank-you, after several hours I came across this script which will do exactly what I need!

    ReplyDelete
  8. Awesome... Thanks...

    ReplyDelete
  9. Is there a way to add form and file size validation before the progress bar gets triggered? For example, I added a bit of php form validation, but the progress bar shows 100% upload even though it didn't get uploaded due to the validation.

    ReplyDelete
  10. Can I legally use this on my website, because in meta name there is: "Copyright 2014 easyscript4u.com @ All Rights Reserved" ?

    ReplyDelete
  11. I wouldn't worry about rights, Anonymous. People don't post code like this online if they don't intend for people to use it.

    Thank you for this, Bodar, saved a lot of time for me.

    ReplyDelete
  12. Wonderful... Thanks...

    Hi guys please take jquery.form.js from here.
    https://github.com/malsup/form/blob/master/jquery.form.js

    ReplyDelete
  13. file not found.cant download the file please help sir

    ReplyDelete