Jquery Ajax Simple File Upload
Jquery Ajax Simple File Upload Joomla
Ajax has transformed the web entirely by providing high level of interaction with web pages and superior design capabilities. It is widely used to send and receive data without the need to refresh the pages. If you are programming with Javascript or jQuery, at one point of time you might have used Ajax to submit simple html forms. But till today uploading files using Ajax is still a mystery to many. But not a mystery if you know FormData object and FileReader API.The purpose of this article is to provide a clear example of how to write a file upload using jQuery ajax with drag and drop support. Though the actual code is written in jQuery, we will not be able to achieve a pure jQuery solution, but we need to fallback to the native methods of Javascript to do it. And before going in to the article, I like to bring to your notice that you must consider the browser support while implementing ajax file upload.
File selected: noneAlthough this is supported on most current browsers, some really old browsers will not allow you to assign a label for a file input. If you care to provide full backwards-compatible support, the best solution is to provide a button the user can press in case your custom element isn't working. When the user presses the button, it will then unhide the original file input, which the user can use to upload their file.
Jquery Ajax File Upload Example
Jquery File Upload
Or, you can show the original file input in conjunction with your custom UI.