Please refer this fiddle Click here
Here the $('#photoform').serialize(); not return the form field. This problem occurs only for the file field.
How to get this file field values
From the documentation: "Data from file select elements is not serialized."
A file cannot be uploaded using AJAX because you cannot access the contents of a file stored on the client computer and send it in the request using javascript.
An alternative to do this is to use a hidden iframe. This plugin can help you doing that (read this little tutorial for that plugin, too).
Related
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 am working on a php form submit. the form is in a html file and method is submit.php. the fields are-
1. name (text)
2. phone (text)
3. email (test)
4. cv (file)
5. comment (textarea)
I am using jquery form validation plugin (bassistance.de), and jQuery Form Plugin (jquery.malsup.com/form). I want the form to submitted with ajax and email to an address. I have done it successfully. but problem is for file. I cannot understand the procedure. is the file has to be uploaded to server first and then send as attachment? or it can send the file as attachment from client's pc? I am really confused about this. Please help me about this. Also if the file has to be uploaded, then an example for ajax upload will be very helpful. I cannot upload the file when ajax submit the form.
You have to let users to upload the file and then attach it to the email.
name (text)
phone (text)
email (test)
cv (file)
comment (textarea)
Once user submit the form you you have to get the file (CV) Please note that default AJAX POST does not support file. So you have to use some kind of hidden iframe POST technique since you are uploading file as well. Once the file uploaded to the server. You can attach it to your mail and send it via PHP.
There are several jQuery plugins also available for this. You can use those if you prefer plugins.
See http://viralpatel.net/blogs/2008/11/ajax-style-file-uploading-using-hidden-iframe.html
Don't reinvent the wheel...
I would upload the file via the uploadify plugin - http://www.uploadify.com/. It's Gmail like and looks very crispy.
While You are uploading the file just disable the submit button or do some validation to prevent the submit without the file.
Below is a diagram how to implement the download:
i'm trying to upload a file with php. The usual process is:
form POST->php
But i'm using this method:
form->button with onclick event that calls ajax/javascript function->php script call from javascript
I'm passing the full form (this.form) to javascript, javascript do some stuff and send all the form inputs one by one to php using GET (xxx.php?xxx=xxx&yyy=yyy....), one of those inputs is a FILE , and I don't know how to send it to the PHP script trough javascript function.
Thanks in advance
First of all you can't send a file by GET, just use POST, second you need a flash uploader for < IE 8 and for other browser you need an iframe. There is no other solution that i am aware of.
You can use HTML 5 File API to upload file via JS (here is nice tutorial). But you must be cautious, because server may have max URI length limit (see this for more detail).
I'm trying to upload image automatically upon selecting an image via file select box submit to php via AJAX then return it's temp folder location to display this in a div element.
There are many other input elements inside the same form and I only want to do this for image preview.
Is there a way we can do this via jQuery AJAX?
I presume you have to use something like onChange event...
Is this correct?
Yep, you will have to do a jQuery.bind() on the change event for this.
I think this is the behaviour you are after:
http://jsfiddle.net/cMEb2/2/
Be aware that for security reasons some browsers are picky about access to the input[type=file] tag, so you may not be able to read (or change) its properties as readily as for other DOM elements. You can read some of these effects in wikipedia.
Asynchronous file uploads are not really something to be desired, because to create a preview, you would need to upload the file in advance.
However, you might want to check this article. It could be of some help:
http://tomas.epineer.se/archives/3
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