Code for Upload Image in Html Form

Usage:

1. Printing the download button above. The zip file contains all the lawmaking you lot need for the class.
2. Unzip the file html5-contact-class-with-file-upload
3. Open the file named "handler.php"
   Look for sendEmailTo add together the electronic mail addresses to receive the form submissions.
4. Upload the whole binder to your website
5. Open the formpage.html in your browser and test

See the customization guide . You tin can change the validations, edit the styles, and more than

See a video demo here

The sections beneath explicate the code of this form

The HTML Lawmaking

                      <div id="form-chief">   <div id="grade-div">     <course grade="montform" id="reused_form" enctype="multipart/form-data" >       <p form="name">       	<input name="name" type="text" course="feedback-input" required placeholder="Name" id="name" />       </p>       <p class="electronic mail">         <input proper name="email" type="email" required  class="feedback-input" id="e-mail" placeholder="Email" />       </p>       <p class="text">         <textarea name="message" grade="feedback-input" id="comment" placeholder="Message"></textarea>       </p>             <p class="file">         <input proper noun="image" type="file" id="file" course="feedback-input">       </p>             <div class="submit">         <button type="submit" class="button-bluish">SUBMIT</button>         <div form="ease"></div>       </div>     </class>           <div id="error_message" style="width:100%; height:100%; display:none; ">                 <h4>Fault</h4>                 Sorry at that place was an error sending your grade.                    </div>           <div id="success_message" style="width:100%; height:100%; brandish:none; ">           <h2>Success! Your Message was Sent Successfully.</h2>           </div>     </div> </div>                  

CSS Styling

The following extra CSS styling is used to make the grade look better

                      <link rel="stylesheet" href="form.css" >                  

jQuery Grade submission treatment

                      <script> $(function() {     function after_form_submitted(information)      {         if(data.result == 'success')         {             $('form#reused_form').hide();             $('#success_message').prove();             $('#error_message').hide();         }         else         {             $('#error_message').append('<ul></ul>');              jQuery.each(information.errors,function(key,val)             {                 $('#error_message ul').append('<li>'+fundamental+':'+val+'</li>');             });             $('#success_message').hide();             $('#error_message').prove();              //reverse the response on the button             $('button[blazon="button"]', $form).each(office()             {                 $btn = $(this);                 characterization = $btn.prop('orig_label');                 if(label)                 {                     $btn.prop('type','submit' );                      $btn.text(label);                     $btn.prop('orig_label','');                 }             });                      }//else     }  	$('#reused_form').submit(function(e)       {         e.preventDefault();          $grade = $(this);         //show some response on the button         $('push[type="submit"]', $form).each(function()         {             $btn = $(this);             $btn.prop('type','button' );              $btn.prop('orig_label',$btn.text());             $btn.text('Sending ...');         });                               var formdata = new FormData(this);             $.ajax({                 type: "Post",                 url: 'handler.php',                 data: formdata,                 success: after_form_submitted,                 dataType: 'json' ,                 processData: false,                 contentType: simulated,                 cache: false                     });                });	 }); </script>                  

Form Validations

HTML5 validations are used. For example, the Name and Email fields accept 'required' validation and the e-mail field is of input type 'email'.

                      <input type="email" grade="grade-control" id="email" proper name="email" required>                  

Similarly, the message field (textarea) allows a max length of 6000 characters

                      <textarea  name="Message"  maxlength="6000" required></textarea>                  

using the built-in HTML5 validations has the advantage that the browser itself shows the error message.
You can customize those validations to fit your needs

File Upload Treatment

For adding file upload support, start nosotros need to add enctype attribute to the grade tag: enctype="multipart/course-data"

Then, upload fields are added using input of type 'file'

                      <input type="file" name="image"  required />                  

Server Side Handling

Every form requires a server side script to collect the form data and do the processing similar send emails, salve to database etc. This form comes with a PHP script to handle the form submissions. PHP is widely supported server side scripting platform.

When the form is submitted, the javascript form submission outcome handler higher up collects the form data and sends it to the server side script.

The serverside script entry betoken is handler.php (see in your downloaded aught file). The script uses a library called FormHandler, which inturn, uses other libraries.

Here is the code of the handler.php

                      <?php ini_set('display_errors', 1); ini_set('display_startup_errors', 1); error_reporting(E_ALL); /* Tested working with PHP5.4 and higher up (including PHP seven )   */ require_once './vendor/autoload.php';  utilise FormGuide\Handlx\FormHandler;   $pp = new FormHandler();   $validator = $pp->getValidator(); $validator->fields(['name','e-mail'])->areRequired()->maxLength(50); $validator->field('e-mail')->isEmail(); $validator->field('message')->maxLength(6000);   $pp->attachFiles(['prototype']);   $pp->sendEmailTo('someone@gmail.com'); // ← Your email here  repeat $pp->process($_POST);                  

You take to edit the handler.php and change "someone@gmail.com" to your electronic mail address. If you desire to add a second or tertiary email address, yous can do so like this:

                      $fh->sendEmailTo(['someone@gmail.com', 'someone.else@gmail.com']);                  

Server Side Grade Validations

Server side class validations are essential for any form. You can't trust data sent to a form processing script.

For this form, the server side form validations are done using this PHPFormValidation library. Run across the documentation to add together or update the validations.

Customizations

Edit the handler.php and change abc@cdef to your email address. Remove the 2nd email address, if not required.

Encounter the customization guide for more customization options.

Preview the form Download

bricebeyeraident.blogspot.com

Source: http://reusableforms.com/d/o3/html5-contact-form-with-file-upload

Share this post