is it possible to create inner( nested ) forms in php
in our application i want to upload user details to mysql server including user recent work ( that is image ). image is stored in my uploads folder and the path of that image is stored in my database.
that's way i am using inner form to upload image to uploads folder and returns uploaded image path. when the mail form submitted then user details and image path will stored in mysql database this is my idea is it possible or not please give me suggestions...
It is not possible to create nested forms in HTML, the server side language is irrelevant.
You can have multiple submit buttons and use the value of the successful one (i.e. the one that was used to submit the form) to decide if you should accept an image upload and return to the form (repopulated it with the submitted data) or process the other submitted data.
FORMS are part of HTML and not part of PHP at all. And HTML doesn't allow you to have nested FORMS. The best bet, if you want to upload the image and preview before you submit the actual user data would be to use some JS and an IFRAME to simulate nested forms.
An example of what I explained is here : http://www.openjs.com/articles/ajax/ajax_file_upload/
NOTE This is NOT an Ajax file upload (noted in the article too). But this will help you do what you are looking for
Related
I have a form that stores text fields to a database. For image upload, I am using Blueimp jQuery File upload.
I'm looking for a good way of combining these, so I can store the image URL to a field in my database.
The jquery variable file.url gives me the URL of the uploaded file (after renaming if another image has same name as uploaded file.
var link = $('<a>')
.attr('target', '_blank')
.prop('href', file.url);
console.log(file.url); // gives: http://localhost/uploads/image.jpg
Can I somehow send this URL to a hidden input field in my form? I'm aware that the image has to be uploaded before I submit form, otherwise the jQuery variable is empty.
Any suggestions?
I suggest you do this in steps. First you ask the main info and then you ask the user for the picture.
If you can't (or simply don't want it to be this way) the easiest way is to set a hidden field with this value.
As an alternative, you can upload this file to a temporary folder or with a specific name that you can associate to the data you are about to send, like an ID or session ID of the user + some unique identifier.
After you send the image via the plugin you will not need to send the image url with the form data, since you will know where it will be and can rename, move and build the url before saving the data to the database.
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');
I'm using Valum's AJAX uploader, which is quite nice. I have a form that lets you fill out some info and optionally attach files.
I have a hidden input on the form that has a randomly generated "token" (5 character alnum). The uploads are sent to a tmp folder and the info about those files (name, dir, token) are kept in a uploads_tmp table in a database.
Then, when the user successfully submits the form, those files are moved to a more permanent location and the rows from the uploads_tmp are moved to the uploads table.
If the user submits and there are errors with the form, my script knows there are uploads from a previous attempt via the token. So there's no need to re-upload files.
Is this the right way of doing it or am I going about it all wrong? I'm using PHP (CodeIgniter to be exact).
There isn't any one correct way of doing something like this. Your method seems like a good intuitive one, but really it's down to whatever works for you and your situation.
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.
I have a file field in my form.
I want the user to be able to choose an image, press OK, and then without submitting the form, preview the image in a smaller resized way. If everything is to the satisfactory of the user, then hit submit and the image as well as the form is submitted...
How would you good professionals do this basically?
Thanks
You need to submit at least a form to upload the file and display it. You can simulate an Ajax upload by using an iframe.
You might want to have a look to the following:
http://www.atwebresults.com/php_ajax_image_upload/
I think the best method would be:
The user presses the OK button, an AJAX request is made in the background to submit the form which would upload the image in a temporary location, without the user knowing. The request would return to you the temporary files location.
Then you can display the resized image to the user and if they are satisfied they can choose to submit the form and upload the original image.
Here's an article which also might help you out
When you've uploaded the image once, there's no point uploading it a second time, you may as well keep the copy already on the server, so long as you have some way to tie it back to the form once that's submitted, or removing it if the form is never submitted.
Cleaning up uploaded images is a problem you will have to solve anyway. Once you've uploaded the image, the server will have to keep it around, as the browser will have to request the image in a second request to be able to display it.
I would do this then:
Have a separate form for the image(s), make sure it includes some id field so that you can tie them all together.
Have the image(s) form automatically submit using AJAX as part of an onchange event on the file field.
When the AJAX call succeeds, add an img element to your page to display the uploaded image.
Submit the rest of the form separately.
Cleaning up uploaded images that you don't want (say the user adds a couple of pictures, and then closes the browser without submitting the main form), is a separate issue, and how you deal with it will depend on what sort of application you are developing.
You can use the tag for this.
Basically, you put your upload field to an iframe. When a user uploads an image, the iframe gets reloaded, but not the whole page, at the mean time on the server side you peform resizing.