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
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.
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/
I am looking for a multiple file uploader that can upload limited number of files with following specifications.
Something like the plugin given below, that shows a upload button as well, and uploads all the files using some jquery or ajax working (without the use of flash) showing a slider to show the uploading in process, and on event complete shows them just below the input box. With a cross shown in some corner with respect to each file, for the user to unselect that particular file.
And also make sure, the number of files doesn't exceeds the provided number.
http://www.fyneworks.com/jquery/multiple-file-upload
I used this plugin and it does the main job (select multiple files and limit them), but my script fails when the size of the files is too large and they are too many in the number.
Anything that could do the job, near around expected conditions is welcome. Also, the script should be php compatible.
Something that can limit the number of files and upload them to the server and just show them below the input button would do. I will manage the rest. But it should be easy to use.
I think you should look at jQuery File Upload (link to its demo).
It seems to do all that you are asking for and more. It also works well with PHP. You can set the size limit for files.
It does use Twitter Bootstrap, so it looks great by default. But if you want to change the styling (for example replacing the Cancel button with an X) you should be able to do that in CSS.
It does not use Flash
It works with PHP
It allows you to limit by file size and number of files (see documentation)
It allows you Drag and Drop (not one of your requirements, but cool nonetheless)
It shows progress for individual files and an overall progress
I have been working with this plugin and so far it is been great!
www.uploadify.com
So here is what I want in short:
A PHP/Javascript/AJAX based File Uploader with a Progress bar what shows the percent(ex: 52%) and <div> what grows in width as the upload goes on.
And in long:
I would like a solution written in PHP and Javascript(Not jQuery), I tried myself but in server side I can't get the file size of the uploading file so I can't calculate the remaining percent.
Maybe there is a way to do it normally but I didn't find any clear ways. What I found is a lots of PHP patches what didn't worked :\ .
At last I tried Uber Uploader what uses Perl, I installed correctly but when I try to upload a file the progress bar is not shown, there are no errors just doesn't works :(.
However I don't really like to use such solutions because it's really messy even if it works, I like to write my own code if it's possible but I don't find any solution yet.
Also there are flash uploaders like pixeline and swfupload , but as I sayed I would like to use PHP and Javascript.
You should use the UploadProgress extension, along with a jQuery AJAX request that updates your progress bar according to the reply, every x milliseconds.
Here's the link to the extension: http://pecl.php.net/package/uploadprogress/
Alternatively, it can also be done with APC.
The file size can be obtained when you access the directory or folder of the file and this may be requested separately or when opening the file depending on the language you eventually use. The progress bar types are legally protected items and they have rules for indicating the progress in different ways visually and some are licensable from major suppliers but there are some freeware or shareware versions which may operate on a compatible operating system when allowed.
PHP completely processes file uploads before passing control back to the page.
This creates a problem.
The only real PHP solution I know of involves the use of APC, which adds a hook to PHP that you can access via a second PHP script over AJAX.
So I have some form processing code which processes the standard text inputs and also uploaded files (through the $_FILES array)
I want to have the submission done through AJAX
Will jQuery's post(). method still pass that stuff through -> $_FILES or do I need to do something special?
Ajax (as defined, using JavaScript) cannot perform file uploads, as JavaScript cannot access the local filesystem. There are workarounds that seem to use Ajax, such as an iframe or using Flash.
Hunt around Google, you'll find something. There are more libraries (YUI for example) that are putting this together.
To upload files via Ajax, you need to use a workaround using iframes or Flash.
I recommend you Uploadify, it uses flash to do the uploading, and uses jQuery. I like the fact that it has many settings, and it comes with a nice default style for the queue handling. Just follow the instructions to set it up in your site.
In the PHP script you'll receive the file in the $_FILES array, just like if it were a normal submission via a form, the default name is 'Filedata', so you can access your file via $_FILES['Filedata']. Then just echo the response for the Ajax request (JSON or XML), and execute some JS code for the Uploadify 'onComplete' event.
You can try using HTML 5's file upload API, which will require they drag and drop the file into the browser window. Read more here: http://www.appelsiini.net/2009/10/html5-drag-and-drop-multiple-file-upload
Additionally, you can do the same thing with Google Gears (which requires an install for IE but is default on Chrome).
It is possible to detect the presence of either and degrade gracefully.