Does anyone know how to get a progress bar for an upload in php? I am trying writing code for a photo album uploader. I would like a progress bar to display while the photos are uploading.
I am fairly new to php so I dont know everything about it.
This is by far (after hours of googling and trying scripts) the simplest to set up and nicest uploader I've found
https://github.com/FineUploader/fine-uploader
It doesn't require APC or any other external PHP libraries, I can get file progress feedback on a shared host, and it claims to support html5 drag and drop (personally untested) and multiple file uploads.
If you have APC installed, it has a callback hook for upload progress.
Rasmus Lerdorf (PHP's creator) has a sample of this using YUI (oh, and here's the PHP source).
See the documentation here.
I'm sorry to say that to the best of my knowledge a pure PHP upload progress bar, or even a PHP/Javascript upload progress bar is not possible because of how PHP works. Your best bet is to use some form of Flash uploader.
AFAIK This is because your script is not executed until all the superglobals are populated, which includes $_FILES. By the time your PHP script gets called, the file is fully uploaded.
EDIT: This is no longer true. It was in 2010.
One PHP-ish (5.2+) & no-Flash way that worked nicely for me:
First, see this post explaining how to get "uploadprogress" extension up and running.
Then, in the page containing the form that you are uploading file(s) from, create the following iframe:
<iframe id="progress_iframe" src="" style="display:none;" scrolling="no" frameborder="0"></iframe>
Next, add this code to your "Submit" button:
onclick="function set() { f=document.getElementById('progress_iframe'); f.style.display='block'; f.src='uploadprogress.php?id=<?=$upload_id?>';} setTimeout(set);"
Now you have a hidden iframe in your form that will come visible and show contents of uploadprogress.php when you click "Submit" to start uploading files. $upload_id must be the same that you are using as the value of hidden field "UPLOAD_IDENTIFIER" in your form.
The uploadprogress.php itself looks about like this (fix and adjust to your needs):
<html>
<head>
<META HTTP-EQUIV='REFRESH' CONTENT='1;URL=?id=<?=$_GET['id']?>'>
</head>
<body>
Upload progress:<br />
<?php
if(!$_GET['id']) die;
$info = uploadprogress_get_info($_GET['id']);
$kbytes_total = round($info['bytes_total'] / 1024);
$kbytes_uploaded = round($info['bytes_uploaded'] / 1024);
echo $kbytes_uploaded.'/'.$kbytes_total.' KB';
?>
</body>
</html>
Note that is self-refreshes every second. You can surely add some nice visual progress bar here (like 2 nested <div>s with different colors) if you like. The iframe with upload progress naturally only works while the upload is in progress, and ends its visible life once the form is submitted and browser reloads to the next page.
Implementation of the upload progress bar is easy and doesn't require any additional PHP extension, JavaScript or Flash. But you need PHP 5.4 and newer.
You have to enable collecting of the upload progress information by setting the directive session.upload_progress.enabled to On in php.ini.
Then add a hidden input to the HTML upload form just before any other file inputs. HTML attribute name of that hidden input should be the same as the value of the directive session.upload_progress.name from php.ini (eventually preceded by session.upload_progress.prefix). The value attribute is up to you, it will be used as part of the session key.
HTML form could looks like this:
<form action="upload.php" method="POST" enctype="multipart/form-data">
<input type="hidden" name="<?php echo ini_get('session.upload_progress.prefix').ini_get('session.upload_progress.name'); ?>" value="myupload" />
<input type="file" name="file1" />
<input type="submit" />
</form>
When you send this form, PHP should create a new key in the $_SESSION superglobal structure which will be populated with the upload status information. The key is concatenated name and value of the hidden input.
In PHP you can take a look at populated upload information:
var_dump($_SESSION[
ini_get('session.upload_progress.prefix')
.ini_get('session.upload_progress.name')
.'_myupload'
]);
The output will look similarly to the following:
$_SESSION["upload_progress_myupload"] = array(
"start_time" => 1234567890, // The request time
"content_length" => 57343257, // POST content length
"bytes_processed" => 54321, // Amount of bytes received and processed
"done" => false, // true when the POST handler has finished, successfully or not
"files" => array(
0 => array(
"field_name" => "file1", // Name of the <input /> field
// The following 3 elements equals those in $_FILES
"name" => "filename.ext",
"tmp_name" => "/tmp/phpxxxxxx",
"error" => 0,
"done" => false, // True when the POST handler has finished handling this file
"start_time" => 1234567890, // When this file has started to be processed
"bytes_processed" => 54321, // Number of bytes received and processed for this file
)
)
);
There is all the information needed to create a progress bar — you have the information if the upload is still in progress, the information how many bytes is going to be transferred in total and how many bytes has been transferred already.
To present the upload progress to the user, write an another PHP script than the uploading one, which will only look at the upload information in the session and return it in the JSON format, for example. This script can be called periodically, for example every second, using AJAX and information presented to the user.
You are even able to cancel the upload by setting the $_SESSION[$key]['cancel_upload'] to true.
For detailed information, additional settings and user's comments see PHP manual.
Another uploader full JS : http://developers.sirika.com/mfu/
Its free ( BSD licence )
Internationalizable
cross browser compliant
you have the choice to install APC or not ( underterminate progress bar VS determinate progress bar )
Customizable look as it uses dojo template mechanism. You can add your class / Ids in the te templates according to your css
have fun
HTML5 introduced a file upload api that allows you to monitor the progress of file uploads but for older browsers there's plupload a framework that specifically made to monitor file uploads and give information about them. plus it has plenty of callbacks so it can work across all browsers
Gears and HTML5 have a progress event in the HttpRequest object for submitting a file upload via AJAX.
http://developer.mozilla.org/en/Using_files_from_web_applications
Your other options as already answered by others are:
Flash based uploader.
Java based uploader.
A second comet-style request to the web server or a script to report the size of data received. Some webservers like Lighttpd provide modules to do this in-process to save the overhead of calling an external script or process.
Technically there is a forth option, similar to YouTube upload, with Gears or HTML5 you can use blobs to split a file into small chunks and individually upload each chunk. On completion of each chunk you can update the progress status.
You would need to use Javascript to create a progress bar. A simple Google search led me to this article: WebAppers Simple Javascript Progress Bar with CSS.
Dojo File Upload Progress Bar Widget is another option using the Dojo Javascript framework.
EDIT: Assuming your uploading a large number of images (such as a photo album), and POSTing them to your PHP script, you could use javascript to read the results back from the post and update the progress bar based on the number of images uploaded / total number of images. This has the side effect of only updating after each post has completed. Check out here for some info on how to post with JS.
A php/ajax progress bar can be done. (Checkout the Html_Ajax library in pear).
However this requires installing a custom module into php.
Other methods require using an iframe, through which php looks to see how much of the file has been uploaded. However this hidden iframe, may be blocked by some browsers addons because hidden iframes are often used to send malicious data to a users computer.
Your best bet is to use some form of flash progress bar if you do not have control over your server.
Related
I'm very new to coding on the web and I'm trying to make something work.
I'm trying to make a little webpage with an easy function to replace an existing image on the page with an image that the users chooses from his own computer. All of this is expected to be done offline. I have however, no idea how..
How do I tackle this?
p.s. With offline I mean, I am expected that this can be done locally without uploading to a server or anything. I am supposed to put this little page on a usb stick so it can be used as a little tool.
Well. you will need to implement file upload functionaility.
you could uses http://www.uploadify.com/
if so then you would use the onUploadSuccess method, to change the image.
when you say offline? do u mean no internet connection, or will the webpage live on a server like a intranet?
............Just to add to my own answer ........
OK, So you need it on a USB. why not install a standalone Server on the USB that way you can run PHP.
http://www.server2go-web.de/index.html
http://www.uwamp.com/en/
$("#file_upload").uploadify({
height : 30,
width : 120,
swf : 'include/fileuploader/uploadify.swf',
uploader : 'include/fileuploader/uploadify.php',
'onUploadSuccess' : function(file, data, response) {
console.log('The file was saved to: ' + data);
$("#img-preview").html("<img src='"+data+"' />");
}
});
I thought I'd show a code example, as this is the idea of StackOverflow. I hope it illustrates how this thing works.
Instead of relying on a set of plugins and libraries you will find out that it is perhaps even easier with native javascript. You can add jQuery to the mix for event handling, etc if you want, it is pretty much standard in the web-dev toolkit anyway.
HTML
First lets add the html for the input and a placeholder img element. You could of course dynamically add the img file with jQuery or native js.
<input id='ourfile' type='file' />
<!-- The image placeholder for our preview -->
<img id='preview' src='' />
Javascript
// Lets cache our two elements of interest.
ourfile = document.getElementById('ourfile');
preview = document.getElementById('preview');
// Create an instance of the 'native' FileReader.
fr = new FileReader();
// When our input triggers change (i.e. image is selected) load the file using the file reader.
ourfile.onchange = function () {
file = ourfile.files[0];
fr.readAsDataURL(file);
}
// Bind to the `onload` event of our FileReader and set the src of the image to the result (base64 of the image).
fr.onload = function(){
preview.src = fr.result;
}
Details
The link in #Akki619's answer shows about details for checking validity of the image, etc.
Fiddle
Here is a link to a working example:
http://jsfiddle.net/rUvUX/4/
This (readAsDataURL) is what you are looking for.
See working example here
In the example attached, you can send the base64 data of your selected image for uploading also.
OUT OF TOPIC HERE: Most of the client are looking for a mobile web app, an app to take picture from phone and send to the server. Not entirely feasible in web apps.
you can use the below javascript to do this:
<script>
function changeImage(newimage)
{
image = document.getElementById('oldimage');
image.src = newimage;
}
</script>
I'm using Codeigniter's upload library to upload images for user avatars. I'm also using Jcrop which allows users to select an area to crop.
(source: webresourcesource.com)
I'm saving all the coordinates of the selected area in text inputs which I'll use in php to crop.
Is it possible to display the image selected before uploading?
Upload form:
<?php echo form_open_multipart('upload/do_upload');?>
<input type="file" name="userfile" size="20" />
<input type="submit" value="upload" />
</form>
If possible I'm trying to avoid heavy js for this or uploading 2 times. When choosing a file I notice that it shows the name of it:
Is there a way to use that functionality to retrieve the image path as well (path to the image in the uploader's computer)? In theory I'll be able to use that in image tags and display the image without js.
To be clear, you are not uploading the file twice in your current solution, right? You should only be uploading once, storing it in a temporary location, displaying it on the crop page, and then sending the crop parameters back on the second action.
Traditionally, there has been no way to access the contents of a file or the value of the file upload form. There would be a security risk letting a web page know the structure of your file system. (Are you on Windows, on an admin account, ...?) Eons ago you could do this, but we got wise.
The File API introduced in HTML5 makes it possible to access files without revealing this information, and there are some cool options available to your client-side application, the key ones being the files property of a file input and URL.createObjectURL.
When you change a form, an internal representation of the file(s) in the input are exposed using fileInput.files which is a FileList object. API's exist where you can read the bytes but you want to set it as the source of an image.
Since a file is not a URL, URL.createObjectURL creates a virtual URL around the file that can only be used by your page and same-origin iframes. Set the image to this, then onload, revoke the URL and kick off your jQuery cropping plugin:
input.addEventListener('change', function () {
preview.src = URL.createObjectURL(this.files[0]);
});
preview.addEventListener('load', function () {
URL.revokeObjectURL(this.src);
alert('jQuery code here. Src: ' + this.src + ', W: ' + this.width + ', H: ' + this.height);
});
Try out this jsFiddle in at least Chrome and Firefox. This is obviously not a solution for all browsers but it is a great way to enhance it for browsers that do support it.
You could potentially do it using css (http://www.seifi.org/css/creating-thumbnails-using-the-css-clip-property.html), but it's going to be incredibly hard to integrate with jcrop...
I would recommend just making the user wait until it has been uploaded. That's what facebook and most other websites that allow cropping do.
In any case it wouldn't speed up the upload process so there isn't that much a reason to do it.
You can't get the full filepath. It would be a security issue: http://forums.asp.net/t/1077850.aspx/1
Well, you can use other cropper library wich comes with a preview like the one defusion has.
http://www.defusion.org.uk/code/javascript-image-cropper-ui-using-prototype-scriptaculous/
Upload a file, but not inside a form
For example :
<input type="file" name="taskuploadfile" />
<input type="button" name="taskupload" value="Task Upload" onclick="taskupload()" />
Using Ajax for javascript to php.
Can I get temp path of file in php or Is it possible ?
Use a library that can do it the best way that you can not reach even after a month of coding.
One of the best examples is JqUploader.
Here is the example: http://pixeline.be/experiments/jqUploader/test.php
You can use the File API to read the data and then send it via XHR as per an example on MDN or by using XHR2 as per HTML 5 Rocks' example.
These methods do have limited browser support though, so you are probably still better off using a real form and submitting to an iframe for the time being.
Since it looks like you are using dojo (from the tags you put in your post)... why not using the HTML5 multi-file upload widget ? It has a plugin to do ajax uploads...
More on that here : http://dojotoolkit.org/documentation/tutorials/1.6/uploader/
Reference documentation here : http://dojotoolkit.org/reference-guide/dojox/form/Uploader.html
It is not possible to do a file upload with ajax. The only trick is to use an IFRAME. And since you want to POST something to the server, you have to use a form tag.
I have this form and I would like to read the uploaded file and then fill out the form using this read information without refreshing the page.
For example the first word might be "Bob" and so I would want that to go in my input text "First_name." I've been trying to searching online for a way to do this using JQuery or Ajax but I can't seem to find a solution.
Can this be done using the two methods previously mentioned? If so and if not can someone point me to a link or to where I can learn how to do this? The instances I have found include where one uses JQuery to upload the file and display the size without refresh (which is not exactly what I want).
I have also found how one can use an iFrame but this again is not what I want. I suppose I could always just submit the part of the page containing the textfile related information and show the same form but with the filled out information. But I feel as if this is kind of sloppy and I want to know if there is a better way.
Thanks.
Firefox has a method to do this, the File and FileList API provide a way to get at the files selected by a file input element and have a text retrieval method.
A very basic example:
NB. Not all browsers support this code.
[I think Chrome, Firefox and Opera do at time of writing.]
HTML:
<form>
<input type="file" name="thefile" id="thefile" />
</form>
<div id="text"></div>
JS (using jQuery):
$(document).ready(function() {
$('#thefile').change(function(e) {
if (e.target.files != undefined) {
var reader = new FileReader();
reader.onload = function(e) {
$('#text').text(e.target.result);
};
reader.readAsText(e.target.files.item(0));
}
return false;
});
});
Demo: http://jsfiddle.net/FSc8y/2/
If the selected file was a CSV file, you could then process it directly in javascript.
.split() will be useful in that case to split lines and then fields.
the only way I know would be to submit the form to a hidden iframe. this will upload teh file without refreshing the page. you can then use any returned info using javascript. this is what they use for fake ajax style image uploads that let you preview an image before uploading. the truth is it already has been uploaded via a hidden iframe. unfortunately however iframes are not xhtml 1.0 compliant.
something like this article may help:
http://djpate.com/2009/05/24/form-submit-via-hidden-iframe-aka-fake-ajax/
The question you might ask is :
why should I use this method instead of real ajax ?
Well they’re is numereous answer to that but one good reason it that
is doesnt require any type of ajax libs and you can start using it
even if you never used ajax before.
So here it goes.
<form method=”post” action=”formProcess.php” target=”hiddenIFrame”>
<input type=”text” name=”test” /> </form>
<iframe style=”width:0px;height:0px;border:0px;” name=hiddenIFrame />
This is just a normal form but you’ll notice the target in the form
tag, this tells the form to submit in the iframe instead of the
current page.
It’s works exactly as the target attribut on the A tag.
Also the iframe is hidden from the user using
style=”width:0px;height:0px;border:0px;”
now the file formProcess.php is not different from your normal form
processing file but if you want do something on the main page you have
to use JS like that :
window.parent.whatEverYouWannaDoInParentForm();
You can also upload file with this method !
Please checkout the formphp for full example.
Cheers !
Nb : You will see the status bar acts like the page is reloading but
it’s really not.
Does anyone know how to get a progress bar for an upload in php? I am trying writing code for a photo album uploader. I would like a progress bar to display while the photos are uploading.
I am fairly new to php so I dont know everything about it.
This is by far (after hours of googling and trying scripts) the simplest to set up and nicest uploader I've found
https://github.com/FineUploader/fine-uploader
It doesn't require APC or any other external PHP libraries, I can get file progress feedback on a shared host, and it claims to support html5 drag and drop (personally untested) and multiple file uploads.
If you have APC installed, it has a callback hook for upload progress.
Rasmus Lerdorf (PHP's creator) has a sample of this using YUI (oh, and here's the PHP source).
See the documentation here.
I'm sorry to say that to the best of my knowledge a pure PHP upload progress bar, or even a PHP/Javascript upload progress bar is not possible because of how PHP works. Your best bet is to use some form of Flash uploader.
AFAIK This is because your script is not executed until all the superglobals are populated, which includes $_FILES. By the time your PHP script gets called, the file is fully uploaded.
EDIT: This is no longer true. It was in 2010.
One PHP-ish (5.2+) & no-Flash way that worked nicely for me:
First, see this post explaining how to get "uploadprogress" extension up and running.
Then, in the page containing the form that you are uploading file(s) from, create the following iframe:
<iframe id="progress_iframe" src="" style="display:none;" scrolling="no" frameborder="0"></iframe>
Next, add this code to your "Submit" button:
onclick="function set() { f=document.getElementById('progress_iframe'); f.style.display='block'; f.src='uploadprogress.php?id=<?=$upload_id?>';} setTimeout(set);"
Now you have a hidden iframe in your form that will come visible and show contents of uploadprogress.php when you click "Submit" to start uploading files. $upload_id must be the same that you are using as the value of hidden field "UPLOAD_IDENTIFIER" in your form.
The uploadprogress.php itself looks about like this (fix and adjust to your needs):
<html>
<head>
<META HTTP-EQUIV='REFRESH' CONTENT='1;URL=?id=<?=$_GET['id']?>'>
</head>
<body>
Upload progress:<br />
<?php
if(!$_GET['id']) die;
$info = uploadprogress_get_info($_GET['id']);
$kbytes_total = round($info['bytes_total'] / 1024);
$kbytes_uploaded = round($info['bytes_uploaded'] / 1024);
echo $kbytes_uploaded.'/'.$kbytes_total.' KB';
?>
</body>
</html>
Note that is self-refreshes every second. You can surely add some nice visual progress bar here (like 2 nested <div>s with different colors) if you like. The iframe with upload progress naturally only works while the upload is in progress, and ends its visible life once the form is submitted and browser reloads to the next page.
Implementation of the upload progress bar is easy and doesn't require any additional PHP extension, JavaScript or Flash. But you need PHP 5.4 and newer.
You have to enable collecting of the upload progress information by setting the directive session.upload_progress.enabled to On in php.ini.
Then add a hidden input to the HTML upload form just before any other file inputs. HTML attribute name of that hidden input should be the same as the value of the directive session.upload_progress.name from php.ini (eventually preceded by session.upload_progress.prefix). The value attribute is up to you, it will be used as part of the session key.
HTML form could looks like this:
<form action="upload.php" method="POST" enctype="multipart/form-data">
<input type="hidden" name="<?php echo ini_get('session.upload_progress.prefix').ini_get('session.upload_progress.name'); ?>" value="myupload" />
<input type="file" name="file1" />
<input type="submit" />
</form>
When you send this form, PHP should create a new key in the $_SESSION superglobal structure which will be populated with the upload status information. The key is concatenated name and value of the hidden input.
In PHP you can take a look at populated upload information:
var_dump($_SESSION[
ini_get('session.upload_progress.prefix')
.ini_get('session.upload_progress.name')
.'_myupload'
]);
The output will look similarly to the following:
$_SESSION["upload_progress_myupload"] = array(
"start_time" => 1234567890, // The request time
"content_length" => 57343257, // POST content length
"bytes_processed" => 54321, // Amount of bytes received and processed
"done" => false, // true when the POST handler has finished, successfully or not
"files" => array(
0 => array(
"field_name" => "file1", // Name of the <input /> field
// The following 3 elements equals those in $_FILES
"name" => "filename.ext",
"tmp_name" => "/tmp/phpxxxxxx",
"error" => 0,
"done" => false, // True when the POST handler has finished handling this file
"start_time" => 1234567890, // When this file has started to be processed
"bytes_processed" => 54321, // Number of bytes received and processed for this file
)
)
);
There is all the information needed to create a progress bar — you have the information if the upload is still in progress, the information how many bytes is going to be transferred in total and how many bytes has been transferred already.
To present the upload progress to the user, write an another PHP script than the uploading one, which will only look at the upload information in the session and return it in the JSON format, for example. This script can be called periodically, for example every second, using AJAX and information presented to the user.
You are even able to cancel the upload by setting the $_SESSION[$key]['cancel_upload'] to true.
For detailed information, additional settings and user's comments see PHP manual.
Another uploader full JS : http://developers.sirika.com/mfu/
Its free ( BSD licence )
Internationalizable
cross browser compliant
you have the choice to install APC or not ( underterminate progress bar VS determinate progress bar )
Customizable look as it uses dojo template mechanism. You can add your class / Ids in the te templates according to your css
have fun
HTML5 introduced a file upload api that allows you to monitor the progress of file uploads but for older browsers there's plupload a framework that specifically made to monitor file uploads and give information about them. plus it has plenty of callbacks so it can work across all browsers
Gears and HTML5 have a progress event in the HttpRequest object for submitting a file upload via AJAX.
http://developer.mozilla.org/en/Using_files_from_web_applications
Your other options as already answered by others are:
Flash based uploader.
Java based uploader.
A second comet-style request to the web server or a script to report the size of data received. Some webservers like Lighttpd provide modules to do this in-process to save the overhead of calling an external script or process.
Technically there is a forth option, similar to YouTube upload, with Gears or HTML5 you can use blobs to split a file into small chunks and individually upload each chunk. On completion of each chunk you can update the progress status.
You would need to use Javascript to create a progress bar. A simple Google search led me to this article: WebAppers Simple Javascript Progress Bar with CSS.
Dojo File Upload Progress Bar Widget is another option using the Dojo Javascript framework.
EDIT: Assuming your uploading a large number of images (such as a photo album), and POSTing them to your PHP script, you could use javascript to read the results back from the post and update the progress bar based on the number of images uploaded / total number of images. This has the side effect of only updating after each post has completed. Check out here for some info on how to post with JS.
A php/ajax progress bar can be done. (Checkout the Html_Ajax library in pear).
However this requires installing a custom module into php.
Other methods require using an iframe, through which php looks to see how much of the file has been uploaded. However this hidden iframe, may be blocked by some browsers addons because hidden iframes are often used to send malicious data to a users computer.
Your best bet is to use some form of flash progress bar if you do not have control over your server.