File upload and form on the same page, upload first and submit the form

Recently encountered in the project in the form of a picture upload, request pictures Click Upload can see the pictures passed, and then fill out the form submitted to the background to do processing, summed up the technology and ideas

1 using Jquery-form JS Library, using the Ajax volume of form form

2 the form that will upload the picture is enclosed in a single page, and then use the <iframe> tag to nest in the main form.

The benefits of this are: (1) can be reused by other uploaded pages

(2) When using the Jquery-valiad plug-in to do form verification, if the upload form form nested in the main Form form, upload form in the use of JS acquisition can not get the upload picture form form cannot upload pictures.

3 Upload the image on the page using the Ajax form upload in the upload success of the return function in the upload successful picture name assigned to the main form of the hidden fields inside so that can be uploaded to the background

4 form submission validation using the Jquery-validate plug-in

5 Code Show