Use JQuery to implement asynchronous form submission and file upload functions-JS Tutorial-php.cn

The example in this article describes the JQuery asynchronous form submission and file upload functions. Share it with everyone for your reference, the details are as follows:

Jquery.form.js is a plug-in that can submit forms and upload files asynchronously.

Examples are as follows:

index.html

<!DOCTYPE html>
<html>
<head> 
  <title></title> 
  <meta charset="utf-8" /> 
  <script type="text/javascript" language="javascript" src="js/jquery-1.10.2.js"></script> 
  <script type="text/javascript" language="javascript" src="js/jquery.form.js"></script> 
  < script type = "text/javascript"language = "javascript" > 
  $(function() { //异步提交表单    
    $("#ajaxSubmit").on("click",function(){      
      console.log($(this));      
        $("#formToUpdate").ajaxSubmit({     
             type:&#39;post&#39;,          
             url:&#39;p.php&#39;,          
             success:function(data){            
             console.log(data);          },          
             error:function(XmlHttpRequest,textStatus,errorThrown){          
               console.log(XmlHttpRequest);            
               console.log(textStatus);            
               console.log(errorThrown);     
                    }    
                   });   
                      }); 
                         });  
                         </script>
  </head>
 <body>
  <form id="formToUpdate" method="post" action="#" enctype="multipart/form-data"> 
   <input type="text" name="t1" />
   <br /> 
   <input type="file" name="f1" />
   <br /> 
   <input id="ajaxSubmit" type="button" value="异步提交" />
  </form> 
 </body>
</html>

p.php

<? php
/** * Created by JetBrains PhpStorm. * User: smeoi * To change this template use File | Settings | File Templates. */
echo &#39;<pre class="brush:php;toolbar:false">&#39;;
print_r($_POST);
echo &#39;

'; echo '

&#39;;
print_r($_FILES);
echo &#39;

Rendering ：

UaHHTML5 Chinese Learning Network-HTML5 Pioneer Learning Network

The above is the detailed content of Use JQuery to implement asynchronous form submission and file upload functions. For more information, please follow other related articles on the PHP Chinese website!

Use JQuery to implement asynchronous form submission and file upload functions

Related articles