I'm trying to find a way to input an image directly onto the same page, but I can't figure it out.
The image doesn't need to be saved when navigating away from the page.
I've tried:
<form action="#" method="post">
but I still can't figure out how to actually put it where I want it.
This might be really simple and I'm just overthinking it, but I've been googling for hours with no result.
You need to leave empty form action and specify enctype
Example:
<form action="" method="POST" enctype="multipart/form-data">
<input type="file">
<input type="submit">
</form>
This will push image into $_FILES array in php. For uploading images you need to view http://www.w3schools.com/php/php_file_upload.asp
If I understand you correctly, basically what you are trying to do is impossible. (without ajax)
The basic way a web-site works is:
browser asks for a page
server sends back page.
If you're trying to change the page after it has been sent to the browser (i.e. add an image), then you need to do some work behind the scenes.
browser asks for a page
server sends back page with some javascript in it that allows fetching additional data from the server.
javascript asks for additional data from the server.
additional data gets added to the page.
Since javascript has no access to the local machine outside the browser sandbox you'll have to get the user/javascript to send the image to the server, and the server then has to send it back to your javascript (which can then embed it in your page)
jquery or similar is probably the way to go.
You'll need a page/script on your server to handle the upload and serving of the image file.
Alternative
A simpler method might be to have a file input field on a form in your initial page with no image, when the page is submitted, check the $_FILES variable (see move_uploaded_file) and now serve the same page this time with the uploaded file displayed. You could then delete the image file from your server if you need it only once.
Related
I'm Just working on a simple form in PHP but i have a problem, i have many fields in my form and one of these is a file input type, if there are no issues with the file uploaded but an error occurred on another field, How can I ( in the refreshed page) maintain the file previously uploaded?
Edit: We understood what you want, but this is not possible, filling the file-input again automatically after validation. The user has to select his files again, this is how browsers works, for security matters.
Well, since you know what you're doing, you dont really need a script, you really need some help/ideas on how to approach what you want. What I would do is:
- Save the path of the uploaded file in session user data variable, like $_SESSION['uploaded_file'], and retrieve it after error.
- Use AJAX, different form, to upload the file before user hit submit.
Obs: If the user gives up on completing the form even though he uploaded a file, his files will be on your server, 'stealing' some useful space. So I don't know if this is a really good approach, but a good one, would be using different forms, disassembling the upload action from the form's informations.
Real example: If user is filling out a form to be a member of your website/forum/whatever, just let him upload the profile picture later, only when his account is really active. You could be saving some trouble.
Another one: If the user just wants to change profile picture, also make the uploading action to have no influence (and vice-versa) with his profile informations and etc. This is a trouble-saver, and a better approaching solution.
But, if you're like uploading a photo to a gallery and setting description and etc for the picture, then you could be using of a more elaborated validation, using javascript/ajax to check if fields are being filled correctly before submiting data.
On your upload code first save the values into SESSION like:
$_SESSION[name] = $_POST[name];
then print it into your INPUTS like:
<input type="text" name="name" value="<?=$_SESSION[name]?>">
Don't forget to use session_start().
Or look for javascript alternatives
I have a form that posts a file to a site that I don't have control and that site responds with a dynamically generated text file based on the uploaded file. That response is downloaded by the client after the form is submitted. My question is: how can I grab this text file and copy it to my server before it gets to the user?
Possible solution 1: is there a way to change this file's headers and put its content to some hidden div or iframe?
Possible solution 2: I think the best way is that I create a script that gets the form data and then reposts it to the external site and then gets the response and writes this response to my site in a txt file. Unfortunately all my attempts to get this working have failed.
Example of solution 2:
<form action="mysite.com/respostScriptThatGrabsResponse.php" method="post">
<input type="file" name="filename"/>
<input type="submit" value="submit"/>
</from>
Theory #2 would be the way to go. You could use cURL to post the data to the external site. The most likely obstacle preventing success would be the external site requiring cookie data that only the client would have.
My client wants to have a 3 page form. The first page allows the user to enter data including a uploaded file. the second page confirms this data. and the third page submits the data to the database and directories.
Via post, I can keep saving the data to a hidden input fields, thats no problem. My problem is the uploaded file. how do I hold that document from page to page ? I am using Cakephp but any advice would help, thanks
You can always just create the illustion that the form is utilising three different pages. Use AJAX to accept and validate/request the user confirm their submitted data. If in this view they accept it initiate a POST to submit all that data.
You really don't need three physically different files to achieve this but you can still let it appear in three stages to keep your client happy.
You just upload the file to temp directory and keep the value in hidden variables just like other form data . If form successfully submitted then the image copy to desired location other wise delete the image
You can easily fake these 3 pages using CSS. Or even 2, as "third page" is actually a server script which has nothing to do with pages in the browser.
Just make your form, then put an event on the submit button which changes divs to whatever "confirmation page" he wants. and then actually send the form using a button on this page.
that's all
An uploaded file is always held temporarily. The server env var should tell you where it is. In Ruby's rack it is stored in the params var. So I guess there is a similar params var in php which has a hash with all the necessary information.
Since the file would be uploaded on the first step, one option is to put the file's location in a hidden input field along with the rest of the data (either there, or put it in the session). With CakePHP, if your file field looks somewhat like that:
<input type="file" name="data[User][image]" id="UserImage" />
Then you will be able to capture the location through
$location = $this->data['User']['image']['tmp_name'];
Which will correspond to something like /var/tmp/xxxxxx
On the last page, if the user confirms all the data, you just use move_uploaded_file() to put the file wherever you want on the server.
move_uploaded_file($location, '/new/location');
People
I want to know how to submit form without action attribute shown.
Like this
<form action="someact.php" method="post">
...
</form>
Some suggest to use $_PHP['SELF'], but I want my form to be processed using another php file like separating UI part and process part so that anyone can't see my process file ?
I want like this
<form method="post">
...
</form>
But it processed to the file I want.
Help please ?
Firstly, I don't quite understand why you would want this. The whole point of the action attribute is to tell the browser where to send the request, and "hiding" it achieves nothing - any half-way competent hacker (or even less than half-way) can still find the information you are hiding, no matter what you do.
Having said that, you could do something like this:
<form id="hidden_action_form" method="post">
<!-- ... -->
</form>
<script type="text/javascript">
document.getElementById('hidden_action_form').action = 'someact.php';
</script>
Why on earth would you need a "hidden" process file? That's impossible: the browser has to know where the request should be sent.
If you explain the problem you're having in the first place, and not the problem that arose from your solition to that problem, other people might be able to help you.
I get the impression that you mix up two things. The PHP-file is only on your server and will not be sent over to the browser. The server (normally apache httpd) processes the file and generates HTML code from it. This code is then sent over to the browser.
When you have a form you MUST have an action associated because as CodeCaster pointed out: The browser needs to know where to send the data. It's like a hyper link without setting the href-Attribute. Nothing can ever happen because the browser does not know what to do.
You can't do that. A form must always have an action attribute.
Noone can see the contents of the file that is going to process the form data (if this is your problem).
You won't be able to hide that without javascript. Even javascript won't hide it, but can post the data to another file while the user gets directed to the (public) file defined in the action of the form.
You can use an ajax post() call to POST data to another file. See the link provided to do this with jQuery and make sure that ajax sends the post first and then redirects/loads the user-content.
Notice though that if a client has javascript disabled, the whole POST will not be executed. Also if someone takes a look into your js, one can see the hidden filename there too, unless you password-protect the js file.
Is it possible to reload a form after 'file-input' change?
I have a form where the user can chose an image for upload. I also have a php script which displays that image resized.
I only wonder if it is possible to reload a form OnChange of the file-input and then call the php code which uploads the picture, so that the user can preview it?
Does the php file have to be the same file as in the ? or can I call another php file for the image upload only, with javascript?
NOTE: The user will be able to upload multiple pictures...
Please guide me in the right direction with as much input you can...
UPDATE:
No ajax... can this be done without it? No problem for me if the page reloads, but with the image this time... can it be done?
Thanks
It is possible of course, as with all programming, in most cases if you can think it it is possible.
From what I see you are looking at a form that will update the result of an upload via AJAX. You will need to look at javascript frameworks like jQuery to accomplish this, and you will basically upload the image/resize it, and display it to the user all without a page reload.
Data in the form will be updated with an ajax call coming back from your PHP 'image resizer'
EDIT
Examples of ajax image uploads that may help:
http://www.phpletter.com/Demo/AjaxFileUpload-Demo/
http://pixeline.be/experiments/jqUploader/test.php
You have two issues here.
1) Multiple uploads, so the preview will need to be in a table for each upload. The user will click submit or send and the browser will send it to the server. To do this behind the scenes you will need to find a php script that will help you do this asynchronously.
One I found useful was: http://www.anyexample.com/programming/php/php_ajax_example__asynchronous_file_upload.xml
2) In the iframe response you can then pass back the urls for the thumbnails. This could be the id of each file. The best bet is to create an image tag that calls a php script, which will return the image directly, as a thumbnail.
<img src="/imageview.php?id=3&mode=thumbnail" />
This way you don't have to save the thumbnails, but the user will be able to see it immediately, as you update the src property with the new url.
When you submit the form, the entire page reloads. The only way around this is to put the upload form in an iframe. You cannot upload an image without submitting the form, and you cannot upload a thumbnail of the image, you have to upload the entire image, unless you use flash, silverlight or java.
<input type="file" name="…" onchange="this.form.submit();">
You will need to be smart about tracking which images have been loaded with a given form session and storing a reference to them in hidden inputs.