Hey guys I'm trying to implement file upload on my site without refreshing the page. I don't want something like iFrame is there any other way to do this in ajax? I've tried though (USING Codeigniter & ajax but it outputs "You have not uploaded anything"). I've read certain pages like this one but I couldn't seem to implement it properly. Any suggestions guys? I read almost all suggestions posted here using jquery ajax but they are all not good. I just want pure jquery ajax nothing else.
If its not possible, iframe could do please share some examples. :)
Note: This is only good for one upload at a time. No multiples.
Instead of reinventing a whole thing from a scratch, I would use one of the file upload components.
Plupload - has UI, integrates nicely with jQuery. Depending on browser can use HTML5, Flash, Silverlight or HTML4
Swfupload
Uploadify
there is no AJAX file upload. Its all iFrame behind the curtain when it comes to file upload. The example link you gave does not do any magic but it uses hidden iFrame.
Many Answers can be found here: How can I upload files asynchronously?
This question may be a duplicate to the above
Ref: "There's various ready-made plugins on doing file upload on jquery.
Doing this kind of uploading hacks is not an enjoyable experience, so people enjoy using ready-made solutions.
Here's few:
http://www.phpletter.com/Demo/AjaxFileUpload-Demo
http://www.fyneworks.com/jquery/multiple-file-upload
Ajax File Upload Plugin
Multiple File Upload Plugin
You can search more from jquery's plugin -site."
From pure ajax it is not possible, you can use this ajax form plugin and it will be handle all things (create iframe automatically for input type file)
I have tried many, many plugins for a project in the past, and I came to the conclusion that I liked none of them. Well, except this one: jQuery-file-upload
In my experience this is easily the best plugin out there for handling file upload.
According to my knowledge there has to be a server side programming language such as php.
Try this out.
http://valums.com/ajax-upload/
Related
I have am planning to use Colorbox the jquery lightbox plugin. I am just wondering as to what the best method would be to implement a 'add/upload image' option so it would be easy for a user to upload new images without having to go into the HTML markup and add an individual <img> line of code for each new image.
I am only currently knowledgeable with HTML and CSS at this current time. So if no one already has a snippet they could possibly provide me with, which language would be 'simpler' to learn for just for this specific task. Would it be PHP or Js or something different?
OR am I going about this completely wrong?
Of course they have to upload images to database. You need a suitable back end design. That means you need php to interact with database(or python will also do). If you need dummy upload procedures then you can easily do it with appendTo() method using jquery.
As you are using a plugin, then you will have a method to add an image to the webpage. It will be something like $("user-uploaded-image").plugin-name();
Where you want to upload the image?
Uploading an image means transferring the image to another location (server). For that you need a server side script that
Receives the image.
Saves the image to server hard disk.
php is a server side scripting language.
JS is client side language that is used to sending requests (in this case image ) to server.
Just google it for getting sample image upload scripts.
From taking a look around google for upload scripts suggested by #kiren Siva I came across quite a few CMS type plugins that give me the ability to do exactly what I need.
Some examples can be found here.
Thank you all for your help and suggestions.
Can someone give some pointers regarding implementing pause and resume uploads using php and jquery ?
Regards,
There isn't a way to pause uploads with jQuery/PHP. Uploading a file relies on a POST request, which is either sent or isn't.
However, this plugin allows you to cancel them, along with some other very nice things (all without Flash).
If you want more options, go for Uploadify, which uses Flash.
we can use html5 to do this
http://hacks.mozilla.org/2011/04/resumeupload/
How do I start with creating a file upload mechanism that works via Ajax? I've written file upload scripts before but they involved no JavaScript, just submitting a form with a modified encoding type attribute. I need the file upload to have the following features:
Progress bar
Error checking (for network connection drops, bad data, etc)
Absolutely no "manual" form submission, Ajax takes care of it all.
And finally you know those upload buttons that allow you to select multiple files at once compared to the that only lets you select one file at a time? How can I implement those as well?
I'm using PHP as my backend btw.
You can find answers for your questions by looking at already done ajax file uploaders. There are many different plugins for jquery for example. One of the good place to start is to look at elfinder. Its based on jQuery & jQuery UI frontend and has Python and Php connectors for backend.
Here are another usefull links:
jQuery.upload - A simple ajax file upload plugin
Multiple File Upload widget with Drag&Drop support for jQuery
jQuery File Upload Demo
elFinder - file manager for web
The main thing, that you should understand, that its not possible to upload files using xhr-requests. And for today, the only way to upload files, is to use hidden iframes, and some javascript magic to carry out the work.
I've been searching for good file upload scrips for a long time. I've been using the YUI file uploader most recently, but the following should work well with PHP. For some reason I had a heck of a time learning how to get the YUI to work, plus it uses Flash to do the actual upload.
http://aquantum-demo.appspot.com/file-upload
with set up information for PHP on this page:
https://github.com/blueimp/jQuery-File-Upload/wiki/Setup
I'm looking for free php and jquery(would be nice) upload script which I could
include in my webpage.
It must be able to upload multiple files, and make a
link for them.. as in mysite.com/randomstuff with a list of files
or if I upload one file, then it will redirect to hotlink and then people
wont have to click anything.
It must have easy way to upload files without logging in
so that when I upload I could just give the link to my clients
or friends so that they could download some support files, fixes, etc.
Thanks!
Have a look at this:
http://www.uploadify.com/
It is easy to use jquery and php uploading method. you can upload multiple files at a time.
Hope this helps.
For simple uploads (inc multiple files/good interface), this is what you need: http://www.uploadify.com/
However, it won't do all the url stuff for you. There may be another decent plugin for that. Or you could try some, you know, coding.
You can use a file upload script like the ones mentioned before, but I found that http://www.plupload.com/ is very nice to use.
Anyway, you will still need to code some php to make it work the way you want.
i use CodeIgniter 2.0 framework and i would like when i upload a picture to see a progress bar or even just a percentage. I dont care if its strait php or Javascript or jquery as long as it works!
i would like example code or a link to a good tutorial if possible.
Have you checked out Uploadify:
http://www.uploadify.com/
You can integrate this quite nicely with CodeIgniter to provide exactly what you're looking for as well as multiple uploads etc.
As far as I know the only way to easily show percentage of uploads is to use a flash file of some kind to deal with the upload process. This is what Uploadify does.