I have created a page to upload a file (single) to my server :
<form action="<?php echo $_SERVER['PHP_SELF'];?>?e_name=<?php echo $_GET['e_name']; ?>" method="post" enctype="multipart/form-data">
<input type="file" id="upload-video" name="userfile" onchange="handleFiles(this.files)" class="input"/>
<div>
<input type="submit" name="submit" value="העלה" class="button"/>
</div>
</form>
and i was wondering how i could add a progress bar to it.
i have noticed that in chrome you can see the upload percentage and wanted to know if there is a way to use that information.
if not, what is a good way to do this?
i have been looking around but always seem to get confused with what i find, if someone could explain it simply that would be grate.
thank you very much.
I've been using a jQuery plugin to do all my file uploads, seems quicker than trying to reinvent the wheel. It includes the form plus the progressbar and hints on how to process on the backend. Plus, they've done all the bugchecking for you.
Jquery File Upload Plugin
check this example , this do what you want
Related
As part of a class I've been asked to create a simple file upload system that uploads files in a single button to a folder called ./files. I've been able to do this and I have been able to keep it all contained in one a3.php file with this:
<form action="a3.php" method="post" enctype="multipart/form-data">
<input type="file" name="fileToUpload" id="fileToUpload">
<input type="submit" value="Upload" name="submitFile">
</form>
Which opens up a file dialog and only requires the user to press two buttons
I use the following function to run the upload function.
if(isset($_POST['submitFile']))
{
uploadFile();
}
The uploadFile() function simply uses move_uploaded_file to move to file to the ./files folder. Currently without any questions asked.
My issue is that my attempts to make the buttons for the file upload a single one have been stymied. I have attempted to use the following code to resolve the issue:
<form name="frm" action="a3 - Copy.php" method="post" enctype="multipart/form-data">
<input type="file" name="uploadFile" onchange="frm.submit();">
</form>
Which, while it refreshes the page as if an action is being performed, appears to do nothing. I have attempted to look into how exactly .submit() works but haven't gotten any closer to understanding any intricacies it may have while a part of onchange.
I've looked around and I've found code that can upload in a single button, and I've found code that can upload using an internal php function, but none that does both.
You can try using a button but not displaying it. When the file input is changed, using javascript trigger a click on the hidden button, like in the code below:
<form name="frm" action="a3 - Copy.php" method="post" enctype="multipart/form-data">
<input type="submit" name="submitFile" style="display:none" id="submit">
<input type="file" name="uploadFile" onchange="document.getElementById('submit').click()">
</form>
<?php
if(isset($_POST['submitFile']))
{
uploadFile();
}
?>
You're basically looking for an ajax upload. You can do this using javascript (on modern browser), and the easiest thing would probably be using a library like jquery. Otherwise, you can do it using an iframe.
Here are a few similar questions with example scripts-
Using HTML5 file uploads with AJAX and jQuery
jQuery Ajax File Upload
I am learning PHP and wish to deal with database.
Basically, I want the users to be able to put in some string in input1 and upload the file as well. Then, after the form has been submitted, I want to store the value of input1 and the path of the file in a database. In w3school, I have encountered a tutorial on how to upload a file. However, the tutorial does not deal when I am trying to upload a file and an input at the same time. Below is the code that I have so far.
So how do I go about doing it? Thanks!
<form id="form" action="uploaded.php" method="POST" enctype="multipart/form-data">
<pre>
input1: <input type="text" name="in1" maxlength="20">
File: <input type="file" name="uploadThis">
</pre>
<input type="submit" value="Submit">
</form>
I'm not going to type out exactly how to, because I'm on my iPad, but you'll need to make an if(isset($_POST['sumbit'])) statement for the submit, watch some tutorials on if statements, preferably by PHPacademy. You'll also need something to insert data with, INSERT INTO your db info goes here SELECT your db info goes here FROM your db info goes here. You can find information on doing that with YouTube or Google. You should also add a form action to your <form> , ex. <form action='#'>.
I am using nginx upload module (http://www.grid.net.ru/nginx/upload.en.html) with this plugin https://github.com/drogus/jquery-upload-progress to upload files on my server successfully with progressbar. here is my form:
<form id="upload" enctype="multipart/form-data" action="/upload/" method="post">
<input type="file" name="file_1">
<input type="submit" value="Upload">
</form>
Now i wants to use an option to download remote files with progressbar so my form is this:
<form id="download" action="/upload/" method="post">
<textarea rows="2" cols="20" name="links"></textarea>
<input type="submit" value="Upload">
</form>
So if i give a file i.e http://domain.com/file.zip in links textarea and after hit submit it should display me progressbar for downloading files.
I notice from my first upload method there is some data being generated from a link (http://domain.com/progress?X-Progress-ID=0c1ecb6da3f3ffc3848ceb337541ab1d) like this for files being uploaded but i am not sure if i can use this to show download progressbar:
new Object({ 'state' : 'uploading', 'received' : 674808, 'size' : 2028876 } )
Thank you for any help.
Best Regards
EDIT FIX
Found the solution here, https://gist.github.com/1030450 need to use curl, save the progress in file then call with ajax to get current progress...will post my solution later on :)
Found the solution here, https://gist.github.com/bdunogier/1030450 need to use curl, saved the progress in file then called with ajax to get current progress.
I want to upload the files to this address: http://chusmix.com/Imagenes/grupos and I'm trying with this simple this code but it doesn't work:
<form enctype="multipart/form-data" method="post" action="http://chusmix.com/Imagenes/grupos">
Please specify a file:<br>
<input type="file" name="datafile" size="40">
</p>
<div>
<input type="submit" value="Send">
</div>
</form>
Oddly enough, the first result of a Google search yielded this rather helpful tutorial. Why not read it?
Read the PHP manual chapter "Handling file uploads":
http://php.net/manual/en/features.file-upload.php
The way you think uploads work is not the way they work. The form posts to the script you want to handle the request, not the location you want the uploads to be. When you upload a file to Apache, it places that file in the temporary directory of the computer (in Linux, that's /tmp by default).
Your script has to move the file from the temp directory to wherever you want it to be. The manual has plenty of code showing you how.
Make sure the form is loaded via
http://chusmix.com/Imagenes
The browsers wont you allow to upload to a unkown website (Same origin policy).
Edit your form
<form enctype="multipart/form-data" method="post" action="/grupos">
I was wondering if anyone knew the best way to dynamically create an upload form?
Here's what I'm trying to achieve: The code shown below allows one upload, I want to have a button that when pressed, should add another form for file upload. So, if I want to upload - let's say 7 files, I want to press the button 7 times to create those upload forms, each on it's own row.
Is there anyway I can do it?
Thanks for your assistance:
<html>
<head>
<title> Multiple File Uploads </title>
</head>
<body>
<form enctype="multipart/form-data" action="uploader.php" method="POST">
Choose a file to upload: <input name="uploadedfile" type="file" /><br />
<input type="submit" value="Upload File" />
</form>
</body>
</html>
Usually you do something like this, Client-side:
<div id='Uploadcontainer'>
<input type='file' name='uploadfiles[]' class='uploadfile' />
</div>
<button id='extraUpload'>Add another field</button>
<script type='text/javascript'>
$('#extraUpload').click(function(){
$('.uploadfile:last').clone().appendTo('#uploadContainer');
});
</script>
That is using jQuery. Then on the server side you can easy loop over the $_FILES['uploadfiles'] array:
foreach($_FILES['uploadfiles'] as $file){
//do stuff with $file
}
take a look here for a simple example
http://mohamedshaiful.googlepages.com/add_remove_form.htm
Josh
jQuery has a nice plugin I've used called MultiFile. You may want to check that out.
http://www.fyneworks.com/jquery/multiple-file-upload/
Here's a really really simple one, works in FireFox, Chrome and IE7.
I'd really advise you to check out a javascript framework such as jQuery, it'll make your life easier.
<div id='Uploadcontainer'>
<input type='file' name='uploadfiles[]' class='uploadfile' />
</div>
<button id='extraUpload' onclick="return addAnother('Uploadcontainer')">Add another field</button>
<script type='text/javascript'>
function addAnother(hookID)
{
var hook = document.getElementById(hookID);
var el = document.createElement('input');
el.className = 'uploadfile';
el.setAttribute('type','file');
el.setAttribute('name','uploadfiles[]');
hook.appendChild(el);
return false;
}
You could try this jQuery plugin called uploadify
You could try YUI uploader
Just make sure that you handle the file correctly on the server as Flash sometimes posts the data to the server in different ways. So if you have some way of checking what is in the Request values then you should be good.
There is no way to do this with plain HTML currently. I think it is starting to be addressed in the latest versions of browsers and the forthcoming HTML5 spec.
Most current cross browser solutions will require a JS library (and I think Flash). The alternative is selecting each file individually with it's own input element. For obvious reasons browsers implement very strict security around the scripting and display of file upload elements that can make them hard to work with.