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

Use JQuery to implement asynchronous form submission and file upload functions

巴扎黑

Release： 2017-08-22 16:59:52

Original

1961 people have browsed it

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>

Copy after login

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;

Copy after login

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!