I'm making a simple site using html and php, this site is suposed to let me upload several files at the same time (Selecting them at once in the upload window which opens when I click on a 'select' button), my page already let me upload one file at once, my code is:
HTML:
<form action="php/cargaxml.php" method="POST" role="form" class="uploadForm" enctype="multipart/form-data" >
<input type="file" name = "test" class = "file">
<input type="submit" value="Carga de archivos" id="boton" class = "btn btn-success btn-lg">
</form>
cargaxml.php:
<?php
$target_path = "/public_html/uploads/carga";
copy($_FILES['test']['tmp_name'], $target_path);
echo "File successfully uploaded!";
?>
When I want to upload a file I click on the button:
Upload button
and the browser shows a window to select a file:
Upload window
but when I use ctrl+click to select several files it just unselect the previous file and let me use only one file, other way I've thought is to select a folder which contains several files and upload them in a massive way, but when I select a folder and click on open it just open the folder and doesn't let me to 'upload' the folder.
How can I do to select several files to upload? My site is hosted on 000webhost.com.
I apologise for my English (Isn't so well), thanks in advance:)
In HTML5 you can set the multiple attribute on . This works in browsers supporting HTML5.
<input type="file" name="test" multiple=""/>
For more Information in upload via Ajax https://www.creativefan.com/10-ajax-jquery-file-uploaders/
Related
I am trying to debug my front-end of a HTML/PHP web face and have run into an issue. Currently, the user is able to upload a file, which is then sent to a separate upload function (to process and upload their file to an AWS instance), and then redirects the user to another page.
On the page, I have two options for the user to click- the first of which unhides an option for the user to select and upload their file. This option uploads to the AWS instance and functions normally. The second option unhides some text about download/upload instructions, along with an option for the user to select and upload their file.
Both options do functionally the same thing, with only difference being the second option unhides some text in addition to revealing exactly the same button. Only the first option posts and uploads like normal; the second doesn't upload to the bucket and just returns 'zero' in plain text to the screen. Has anyone experienced anything like this and/or has any advice on how to fix it? Thanks!
Below are the two code snippets for the upload forms:
<form id="Site" method="POST" enctype="multipart/form-data">
<div id="file_input"><input id="files" type="file" name="file"/></div>
<label for="files">SELECT ZIP FILE TO UPLOAD</label>
<br>
<input type="submit" value="submit" name="submitSite">
</form>
and the one that doesn't work (exactly the same?)
<p> Download Instructions Go Here</p><br>
<form id="Site" method="POST" enctype="multipart/form-data">
<div id="file_input"><input id="files" type="file" name="file"/></div>
<label for="files">SELECT ZIP FILE TO UPLOAD</label>
<br>
<input type="submit" value="submit" name="submitSite">
</form>
And the POST function itself is:
<?php
session_start();
$_SESSION['Username'] = '';
$userID = $userID; // change this to be set in database
//set progress
$_SESSION['progress'] = 'upload_section';
'/survey_interface_shared_libraries/progress_emails/store_progress.php';
if (isset($_POST['submitSite'])) { // upload file
Please let me know if you need any further context!
I'm trying to write code in php so that when the .php file is opened, it automatically uploads from a specific file address on my windows computer to the localhost server.
This is my attempt but I'm not sure I fully understand how to do this without using an HTML form where the user specifies the file they want to upload.
<?php
$target = 'UPLOADED_FILE.csv';
move_uploaded_file('C:\Users\Ken.Feier\Desktop\temp\REPORT.csv', $target);
?>
I want the code to take the REPORT.csv file from my personal computer and upload it to our server with the file name UPLOADED_FILE.csv
UPDATE: I see that my problem will not be solved with php. Can anyone recommend any other solution involving Filezilla or any other FTP that can be automated?
That's not how it should be done.
You need a page with a html form, which will send the data to server on submit. Note that the file could be stored on your personal.
Form code e.g.
<form method="post" action="destination.php" enctype="multipart/form-data">
<input type="file" name="filename" />
<input type="submit" value="upload" />
</form>
Then, on the server, you can use the $_FILES['filename'] which contains your file's infos. Note that when a file is uploaded to the server, it's stored in the tmp folder, which is temporary, so you have to move your file to a persistent directory with move_uploaded_file(); (move_uploaded_file Docs)
E.g:
<?php
$file = $_FILES['filename'];
move_uploaded_file($file['tmp_name'], '/new/destination/for/the/filename.php');
I have a button that allows a user to select an image - shown below:
<div id="fileUpload">
<form id="joinPhotoUploadForm" method="POST" enctype="multipart/form-data">
<input type="file" id="file"/>
</form>
<div id="fakefile">
<img src="../../images/button-grey-enhanced.png" id="usePhotoSubmit" alt="BROWSE for Photo">
<span id="usePhoto">BROWSE</span>
</div>
</div>
I then need to upload the image to the server and display the image on the same page without a page refresh. I've tried the following:
$('input#file').change(function() {
$('form#joinPhotoUploadForm').submit();
});
Any advise on how I can get the image upload and displayed on the same page without a page refresh?
thx
You could use the FileReader and File API available in modern browsers to read the file client side before uploading it and display a preview then allow the user upload after they've verified the preview. You can also implement drag and drop with an image from their desktop to the browser instead of a traditional file select input.
Here is a tutorial for it: http://www.html5rocks.com/en/tutorials/file/dndfiles/
In older browsers you can just fall back to a traditional file input with a page reload.
you can try the solution provided in this tutorial
http://www.youtube.com/course?list=EC7C25B2F18F68F3EF&feature=plcp
Have you considered a fancy uploader like Uploadify or Pupload?
Hi i need some help with it. I have created a php script which i am running from copy paste into node as php code. I need a file path for a file to process like i am using '\birds\birds.xml'. I dont want to include the file path instead i am thinking, How to create a simple small form with browse button and selecting a file than submit with submit button. Save the filepath in the variable.
As far as I understood the browse button is for client side (web-browser)
Client Side Browse Button
There are 2 parts to it:
HTML Upload Form
PHP processing script
HTML [form]
<form enctype="multipart/form-data" action="submit-script.php" method="POST">
Choose a file to upload: <input name="uploadedfile" type="file" />
<input type="submit" value="Upload File" />
</form>
PHP [submit-script.php]
$fileName = $_FILES['uploadedfile']['name'];
$target_path = "uploads/";
$target_path = $target_path . basename($fileName);
if(move_uploaded_file($_FILES['uploadedfile']['tmp_name'], $target_path)) {
echo "The file ". basename( $_FILES['uploadedfile']['name']). " uploaded";
} else{
echo "Unable to upload!";
}
Server Side Browse Button
However if you want to click the browse button and browse the server you will have to implement the browse button yourself with ajax or make the process multi-step.
Ajax-Way
On button click event open up Modal Window with directory browsing
There are many open source Directory browsing scripts on the net. Here are few: simple server file browser, fileNice - fancier solution...
Once you click OK in the modal window, before closing the window set some hidden input on the parent to the selected file (using javascript). E.g. window.parent.selectedFile.value ="selected file"
Once you save in your main form. Capture the "selectedFile" from POST and do what you need to do.
Non-Ajax Way
You will need multiple forms for this (on different pages). 1st form will have the file browser (see step 2 in Ajax-Way), store selected file to hidden fields. Once passed to 2nd form, set the value to another hidden fields... request additional information (if needed, if not you can skip 2nd form). Once submitted, do what you need to do...
I have an image uploader that uses the imgur.com API and jQuery's .ajax() function to upload images to their servers. However, if I browse for an image using the <input type="file"/> element of the form, it will only be successful in uploading an image if the image file is found in the same directory as the page.php file that the form is found in (shown below). How can I allow the form to upload images from any directory on my computer?
page.php:
<form action="page.php" method="post">
<input type="file" name="doc" id="doc" /><br/>
<input type="image" src="go.gif" name="submit" id="submit" />
</form>
You've forgotten the enctype="multipart/form-data" attribute on your form tag, for one. Without that, file uploads generally don't work too well.
Beyond that, the server won't really care what directory you're uploading FROM, especially under PHP. The uploaded copy on the server is stored with temporary filename ($_FILES['file']['tmp_name']) that has absolutely nothing to do with the directory/filename on your computer.
Once it's on the server, you'll have to actually move that temporary file somewhere else, as PHP will auto-delete it once the script terminates and you've not handled it yourself. move_uploaded_file() is what's generally used to take of that process.
Perhaps this is the only folder with write-permissions.
I guess it is jquery that is doing the actual posting to http://imgur.com/api/upload as the form is just posting to itself, so my guess is that jquery / javascript can only read files in your web-space and not on your whole hard-drive.