index.php
<form method="post" action="process.php" > Firstname: <input type="text" name="firstname" /> <br /> Lastname: <input type="text" name="lastname" /> <br /> Description: <textarea name="description" rows="10" cols="50" ></textarea> <br /> File Upload: <input type="file" name="upload" /><br /> Preview: <img src="#" /> <br /> <hr /> <input type="submit" value="Submit" /> </form> <hr /> display result form server
<div id="output"></div> get formHTML element and add onsubmit event, and create formData, then call ajax function with arguments formHTML, formData and output display ("#output")
<script> /* submit form */ // https://api.jquery.com/jquery.each/ /* * array.each( function( index, element ) ) * $.each( array, callback ) */ // https://www.w3schools.com/jquery/misc_each.asp /* get all form */ $( "form" ).each( function () { /* each form add onsubmit event */ $( this ).bind( "submit", function (event) { event.preventDefault(); // return false var formHTML = event.target; // $( this ) => not work !! console.log( formHTML ); // formHTML element // https://developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects var formData = new FormData( formHTML ); console.log( formData ); // https://api.jquery.com/jquery.ajax/ // https://www.w3schools.com/jquery/ajax_ajax.asp // https://www.w3schools.com/jquery/jquery_ref_ajax.asp /* AJAX request */ ajax( formHTML, formData, "#output" ); // ajax( form, data, destination ) } ); }); </script> ajax function
<script> function ajax( form, data, destination ) { $.ajax({ method: form.method, url: form.action, data: data, /* result type data JSON.parse(data) http://api.jquery.com/jQuery.ajax/ https://stackoverflow.com/questions/14322984/differences-between-contenttype-and-datatype-in-jquery-ajax-function https://forums.asp.net/t/2087039.aspx?what+is+difference+between+dataType+and+contentType+in+jquery */ dataType: "HTML", /* formData */ contentType: false, // formData with $_POST or $_FILES in server (PHP) processData: false }) /* handle success */ .done( function(result) { $( destination ).html( result ); console.log(result); } ) /* handle error */ .fail( function(error) { alert("Cannot Set Data!"); console.error(error); } ); } </script> add onchange event in input with file type, then display it with img tag
<script> /* preview image */ $( "input[type='file']" ).on( "change", function () { var preview = document.querySelector( "img" ); var file = document.querySelector( "input[type='file']" ).files[0]; var reader = new FileReader(); reader.addEventListener( "load", function () { preview.height = 100; preview.title = file.name; preview.src = reader.result; }, false ); if (file) { reader.readAsDataURL(file); } console.log( reader ); } ); </script> process.php
echo "<pre>"; var_dump($_POST); echo "</pre>"; Demo repl.it
Top comments (0)