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.
Related
How would I go about making a flash image uploader/editor in ActionScipt 2, not 3? I want the user to be able to upload a PNG or JPG image and then display it on the screen. They can then crop it, and if possible, add text and use other normal editing tools. I have an idea on how to do this, but I'm not quite sure on some parts. Any ideas?
well, if I was you I would separate this task into two,
so one will be the uploading on images, and then the next is to create the cropping and editing..
Unless you want to make the whole project in actionscript, the fundamentals are still the same. If so then just find some file uploading thing in actionscript.
Uploading
So look up on how to make a simple uploading project, So you will come across "AJAX", I have done a few it's very easy, but its also good if you use "jquery" if you want to use ajax (so you don't have to reload the page every time the user has to upload a image) there are millions of tutorials and examples on the internet, after you get this working without any problems then you have to work out the fundamentals of the project, for example how am I going to crop the image, use javascript (Im pretty sure you can't but worth a look around, well you will be able to do it action script I think.)
so here is some examples of file uploading..
Without reloading the page "AJAX"
I use this one, when I was learning it was really helpful.
nettuts+
csstrinks
zurb
with reloading the page
SO...purejs
Purejs
The next Task is making the whole editing and cropping bit and intergrate it with your test upload project
Editing
Just make the ui up in flash and google the stuff you don't know how to do...
Im not very good with actionscript so I can't help you there.
But if you want a javascript way, then you will have to do the cropping server side as javascript can't (as far as I know) do cropping.
and editing Im not quite sure what you are meaning by this, but If you want simple editting like, changing brightness then use google and search it up, im sure someone has done it..
Remember when in doubt Google it out :-P
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/
what is the best way to build an upload widget that can handle large files
is there a great jquery plugin for this?
I'd really love to have a progress bar without having to depend on flash
would need to use php for the backend
Take a look at Plupload.
It can't be done without patching PHP or using a combination of PHP and (perl or something else).
See:
http://pdoru.from.ro/
and
http://www.raditha.com/php/progress.php
I think what you're looking for is Uploadify.
Check out Blue Imp! Very nice interface and jQuery branch too!
APC allows to monitor file uploads from PHP http://www.phpriot.com/articles/php-ajax-file-uploads
You can code by yourselve the script that handles large uploads. You need html5 to slice in pieces the file and then upload them, and implode all the parts in the php server.
I have write how to do that in my blog
http://apuntes.alexmoleiro.com/2013/07/subir-archivos-grandes-de-100-mb-hasta.html
It is spanish but the you are going to understand everything just reading the code.
Hope it will be useful for you and for everyone that wants to upload big files without using widgets that really don't do exactly what we want.
I was trying to upload a photo on facebook using a browser with no flash, and could see that it didn't work.
I am pretty confident in handling files and related issues using Php and have done some sites allowing users to upload and manage files (images, docs etc). But I never thought about the above flash approach. I googled a bit and saw that there are few scripts available on which I can look how it works using flash.
But my questions are, when I should decide to use flash for user uploads. What are the advantages of using this approach? or disadvantages?
Thanks
It isn't a choice between Flash and PHP. You need something on the client to send the data and something on the server to receive it.
Ask yourself the following question:
Does Flash offer anything useful for my project?
The obvious things it lets you do are having a nice UI for selecting multiple files at once, and a simple method for seeing the progress of uploads.
If you decide that it does offer features, then implement it using progressive enhancement. Flickr is an example of this — with Flash you get the fancy uploader, without it you still get a series of regular file inputs. They aren't as nice to use, but they are functional and what would have been used if Flash wasn't an option in the first place
Depends on your audience: If you are pretty sure that your users have flash installed, there is nothing against it. It even gives some neat advantages, like:
Upload of multiple files at once
Progress bar while uploading
Instant preview of uploaded media
etc.
Well, with flash, the obvious letdown is that it will only work when a user has flash (although, you could display something in its place if they didn't). If your a flash programmer and comfortable with flash, I can see how it would be better. You could generate a file list, multiple uploads ect. I would say it's just an alternative to JavaScript for providing interactivity and allowing users to upload content dynamically.
when I should decide to use flash for
user uploads.
use it when the whole website is flash, but that is not professional and you can't count a lot on flash security, while you can write/use a lot of classes for hardening and checking files uploaded by php scripts..
on the other hand, some people like flash upload for progress bars, but you can do such stuff with php and jquery. for example check uplodify
Correction
I don't have flash support on my current browser so when watching uploadify demos I only see the fallback, thanks to soulmerge for making this clear
Does anyone know of any methods to create a file upload progress bar in PHP? I have often heard that it's impossible.
I have one idea, but not sure if it would work: have a normal file upload, but instead submit to an iframe. When this is submitted, store the file information (size and temp location) in the session. At the same time, start an AJAX call to every say 10 seconds to check the size of the file compared to the size stored in the session. This would return the size to the AJAX and then a progress bar would be sized and maybe display the uploaded size to the user.
Thoughts?
You're pretty much figured out how to do it. The main problem is you usually don't have access to the size of the uploaded file until it's done uploading.
There are workarounds for this:
Enabling APC, you to access this information if you include a field called "APC_UPLOAD_PROGRESS" and use apc_fetch() for retrieving a cache entry with the status.
There's also a plugin called uploadprogress but it's not very well documented and doesn't work on Windows (last I checked anyway).
An alternative is to use Flash for doing it. See scripts like FancyUpload.
Before APC came along I had to write a CGI script in C that wrote information to a text file. APC seems like a much better way to do it now though.
Hope this helps.
So far, the most common way of doing this is SWFUpload: http://www.swfupload.org/
However, it is possible with pure PHP, just very difficult and very experimental. I'll see if I can find the link.
Edit:
According to comments on php.net, as of 5.2 there is a hook to handle upload progress. http://us.php.net/features.file-upload#71564
More explanation:
http://www.dinke.net/blog/2006/11/04/php-52-upload-progress-meter/en/
http://blog.liip.ch/archive/2006/09/10/upload-progress-meter-extension-for-php-5-2.html
Rasmus' Example:
http://progphp.com/progress.phps
You can try YUI or Prototype or JQuery
From PHP 5.4 it is in session extension: http://php.net//manual/pl/session.upload-progress.php
In pure PHP, you are correct: it's not possible.
If you AJAX-ify this, then you could do what you're describing. The only progress meters I've ever seen are in Javascript or Flash, though I imagine Silverlight could do it also.
"Old school", but a PHP + Perl technique: http://www.raditha.com/php/progress.php
In my opinion, the best / easiest solution is to build a small flash widget, that consists of an 'Upload' button and a progress bar. Flash gives you very detailed feedback on how much data has been uploaded so far, and you can build a nice progress bar based on that. Doesn't require inefficient polling of the server, and in fact doesn't require any changes at all to your server code. Google for 'flash uploader' and you'll find many people have already written these widgets and are happy to sell them to you for a buck.
I'd recommend looking at SWFUpload to accomplish what you want. It's fairly flexible and supports queueing of files, so you could even handle multi-file uploads.
You will definately want to go with digitgerald's FancyUpload. It's Mootools & swfuplaod based, and it sports a nice queue with statusses, progress, eta etc. It's really the slickest method i've seen for uploading files. For my personal use case ivé used it to let the client select 1.2 gb of PDF files and upload them. Newer ones get renamed and versioned automatically, same are skipped, etc.