I am using file upload in my current project. When I click browse button, the file will be uploaded automatically and read number of lines and display that details immediately. I finished this task.
But when I will uploaded large size of file it will take some time to upload. So I need to implement file uploading progress bar.
I used the the following example.
http://aryweb.nl/projects/mootools-form-upload/Demos/Upload.html
http://mootools.net/forge/p/form_upload
<script>
window.addEvent('domready', function(){
var upload = new Form.Upload('files', {
onComplete: function(){
alert('Completed uploading the Files');
}
});
if (!upload.isModern()){
// Use something like
}
});
</script>
This script working well.
But when I will click submit button, that time will be displaying progress bar.
I need to change when I will click browse button that time will be display the progress bar. I don't know how to change.
You are using mootools plugin javascript library that allows you to upload files and track the progress. It has little to do with PHP.
Since demo and documentation for it doesn't have progress tracking, if you look closely at https://github.com/arian/mootools-form-upload/blob/master/Source/Form.Upload.js then you'll see that progress doesn't have any callback in it..
onProgress: function(event){
var loaded = event.loaded, total = event.total;
progress.setStyle('width', parseInt(loaded / total * 100, 10).limit(0, 100) + '%');
},
so you need to either
Use suggested HTML it expects (<div class='progress'></div>), OR
Add your custom behaviour by extending options it includes before that
Related
We use wordpress and have our users fill in a form.
When they click on the submit button, the following happens (thanks to a PDF plugin):
The form and the submit button disappear
A green message is shown ("Success...") and a download link to a PDF file appears, that the plugin has generated out of the filled form so the user can download it.
However, the plugin does not place the file on our servers and thanks to the nonce system (it's like a token), the link won't work at a later point in history.
And that's why I want to auto-download the file to the server as well (no matter if the user downloads it too or not).
My plan so far:
Tie a jQuery script to the submit button, that (as soon as the button is clicked) waits for an element (in this case the download link) to appear like so:
$(document).ready(function(){
$(".submit-button").click(function () {
waitForEl(".pdf-link", function() {
console.log(".pdf-link").attr("href");
});
});
});
var waitForEl = function(selector, callback) {
if (jQuery(selector).length) {
callback();
} else {
setTimeout(function() {
waitForEl(selector, callback);
}, 100);
}
};
(Source of the waitForEl function: https://gist.github.com/chrisjhoughton/7890303)
Where you see the console.log, I want some way to automatically download this PDF file to the server of our website instead, next to the JS file where the code from above is in.
Is that even possible? I can use JS and PHP to achieve this somehow, since we're using Wordpress.
In my current setup I'm uploading a file via a form on "form.php". This form's action calls to a new php file, "upload.php" ,that handles the upload and writes it to the server.
On my form.php I want the user to receive some sort of feedback that the file is being uploaded. This doesn't necessarily have to be a progress bar, a simple percentage from 0-100 will do the trick.
But for some reason all the examples I'm finding via google involve the use of iFrames and I can't get them to work.
Is there a method for only retrieving the percentage uploaded, without the use of iFrames?
So to be clear:
I do want to use jquery/apc/php/ajax etc, whichever require the job to be done.
I don't want to use iFrames/Flash/HTML5 only/Plugins
i have a demo
http://www.longant.com/processbar.php
and you can try!
http://www.longant.com/htmls/342.html
<script src="./jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
total = 100;
intervalId = setInterval(function(){
$.get("/queryTheUploadProcess.php",
function(data){
$(".bar").width(Math.round(data/total*100)+"%");
if (total<data){
clearInterval(intervalId);
}
});
}, 200);
});
</script>
and in queryTheUploadProcess , you can do something what you like !
I'm just curious if things like this is possible >> While still loading a web page, is it possible to return an onbeforeunload like dialog when a user try to navigate to other page or close the browser ?
Well i made this to display a message to be display before someone quits my site, and this gives them the option to stay or leave the page.
I used jquery so you have to add the link to jquery to your site, yo can do this calling a script tag with the src pointing to the next url:
https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js
and after that just add the next code on your webpage
$(document).ready(function()
{
var flag = true;
function Close()
{
if(flag)
{
return "Are you sure you want to leave?";}
}
}
window.onbeforeunload = Close;
});
This will call the Close function at the onbeforeunload event, and will ask if you want to leave or stay
Hope this helps
The thing is I have this set of code that exports a PDF file, I used TCPDF on this one.
$('#export').click(function() {
var conf = confirm("This will generate a PDF file of all the list of products. Continue ?");
if (conf)
{
$('#ajaxloader').css('visibility', 'visible');
var href = "http://"+url+"/export/items.php";
window.open(href, '_self');
}
});
When I click the button, it downloads the pdf file that contains a list of products, but my problem it's taking about more than 30 seconds to render, I already set the time limit so I'll no problem with that, what I want to do is to display a loader while rendering the pdf file, then hide it afterwards.
I have a single php script on my site that facilitates my site's downloads (logs user info, controls user permissions etc). A typical link looks like this on my site:
Download file 12345
In file_download.php I check to make sure the file request is valid, and if so, it does a header force file download
header("Content-type: application/force-download");
which forces the download prompt in the user's browser. The user never leaves the page they click the link on.
What I am wondering is if I am able to toggle a jQuery event from file_download.php onto the parent page? It seems if I do anything on file_download.php other than a 'header force download' the user will leave the page.
Ideally I would like to keep my href links unchanged (for the sake of not editing a million instances site wide) and have file_download.php toggle a lightbox window prompting for user information before the download (if needed of course).
Any help or suggestions would be greatly appreciated, thanks.
You wouldn't need to toggle the event from the PHP page, you could attach the information box to all of your download links, and then use JavaScript to redirect:
var downloadLink;
$(".download-link").click(function(e){
e.preventDefault();
downloadLink= $(this).attr("href");
displayLightbox();
});
$("form").submit(function(e){
e.preventDefault();
//form validation
if(formValidated = true){
window.location = downloadLink;
}
});
I have an example like the above one.
This is your link :
<a id="downloadLinkId" href="file_download.php?file_id=12345">Download file 12345</a>
And this is your javascript:
$("#downloadLinkId").click( function(event) {
event.preventDefault();
launchLightBoxWindow();
});
Rest of the code is on jsfiddle.
I am trying to make a 'simple" php+ajax script to show progress of multiple uploaded files.
I have found on this website and on other pages, packages ready to use, etc.... I want to start from scratch for several reasons, and one of them is learning.
Here is how I wanted to approach it:
First, I start with a ajax code in upload.php (this file contains the upload form and a to display upload progress)
<script>
$(document).ready(function(){
$("#uploadform").change(function(e)
{
e.preventDefault();
setInterval(function(){
$('div#upload_progress').load('upload_progress.php');
}, 1000);
});
});
</script>
upload_progress.php contains the code to get the instant file size on the server (I have not got there yet). So, as for now, the only line I have in 'upload_progress.php' is: 'VOILA'.
Here is my problem: the div #upload_progress does not load during the file uploaded, so I don't see the text in upload_progress.php. I have tried to upload large files or reduce the setInterval time, but without success. Except that when I put an alert window (alert('alertme');) after the setInterval, the div#upload_progress magically get loaded.
I'd really appreciate some help.
Try html5
<progress value="1" max="100">Loading</progress>
And increase value
U can use 2 divs like JMarc says..It's a little rusty and not very religious but it does the job.U retained the width in a session variable that holds the amount of file uploaded.