I have a form that contains both data inputs and file inputs. Now i want to upload files selected right after selection without submitting the form, because form submit will send other data. The reason that i want upload files before submitting form is saving the time, so when the user is filling the form, files will be uploaded.
As i understood i need to use iframes, because ajax can not simply send files, and formData is not supported in IE. But i couldn't find a clear example of it.
Any idea how to do it?
Related
Okay so here's the scenario:
User is presented with form that contains file inputs.
User submits form.
Form does not pass validation/verification for one reason or another.
User is presented form with errors highlighted.
File inputs are now blank.
Question:
Is it possible to re-populate the file inputs with the paths to the files the user originally selected. A PHP solution would be ideal, but I'm also open to JavaScript solutions as well.
I think the short answer here is no. You can't repopulate file upload fields. However, you can work around it.
If a file has been selected and the form submitted, then you've already received the file. What you can do is keep a reference to the file on disk and put that in a hidden field and show a message to indicate to the user you still have their file uploaded so it does not need to be replaced/re-uploaded. When your form gets submitted again without a file, you can check for the hidden field value and use that to get your local copy of the file they uploaded in their last attempt.
The other way to do this is to either submit the form via ajax (using either flash or the iframe method for the file upload) or to do an ajax call to validate the form first, and then only submit as normal if valid (thus no form reload, no loss of file upload field data).
I solved this problem by let user pick upload file as the last field before submit the form ^^
I have a form our guests use to submit a post to a very simple 'message board'.
Now we want to allow the users to upload 1-10 files, but the concern or requirement is to do this outside of the MAIN form submit.
MAIN FORM consists of:
input field 1
input field 2
text area 1
Submit button
I currently have it so there is an initial browse button.. ( below the text are and to the left of the main submit button) and once a file is picked.. and display a link for the user to add another 'browse' field..
What I would like to do is have an UPLOAD button below all these dynamically created browse/file upload fields... that will send all the file data to an external .php script to upload the files in question, and then just return the file path/name back to the main form (maybe in hidden fields? I dont care).. so that these file path/name string values are submitted when the MAIN FORM is submitted..
hope that make sense.
Is this possible? And if so how do I go about this? The concern is to handle the asset uploading/file handling outside of the main form submission so the users details are not lost if something goes wrong with the file upload portion of things.
You can do this with JQuery and Ajax. There are various plugins are available for this. You can try this - http://plugins.jquery.com/uploadfile/
good day,
i want to resubmit a form using php or jquery.
the form will upload a file and to prevent the user from searching for the file and uploading it again and submitting the form, I want them to be able to just resubmit the form to process the file again. the purpose of this is that after uploading the file my code would show some data from the database but what if you have added some new data after you uploaded the file, so the prevent the user from moving back to step 1, I want them to just resubmit the form.
is this possible and how would i go with this?
thank you :)
I have created a script to Upload a file using PHP. I have also added file validation checking for File size & File type. But the scenario here is, the Form contain 10-12 Text boxes & a File upload box. So whenever someone fill the complete form & submit and they get File upload validation error, they get back to the Form with the validation error message. But the form gets empty as obviously it get posted on server side.
Is there any way to do the file upload validation without reloading/refreshing the page ?
I strongly recommend this plugin for file uploads. http://malsup.com/jquery/form/
It will allow you to verify the file, and if theres an error you can use json to determine whether the file is valid or not. I use it in all my projects, it's fantastic.
EDIT: Also it allows you to submit files without page refresh, which is the most important part.
You can use ajax:
1) when submit an ajax synchrounous call send the form content to the php server page
2) the php page validates the input
3) if return is "false" (error in validation) the javascript that executed the call sympli insert into the html of the page a proper message. The form stands filled in with the values of the user
You can use $_POST array for the posted values from the form . You should have write form method as POST
Also the same way you can ajax form this will not loose any of your data and page will not refresh as well
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.