Heim >Web-Frontend >js-Tutorial >Verwendung von JQuery zur Implementierung der asynchronen Formularübermittlungs- und Datei-Upload-Funktionen

Verwendung von JQuery zur Implementierung der asynchronen Formularübermittlungs- und Datei-Upload-Funktionen

巴扎黑
巴扎黑Original
2017-08-22 16:59:522011Durchsuche

Das Beispiel in diesem Artikel beschreibt die asynchronen Formularübermittlungs- und Datei-Upload-Funktionen von JQuery. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt: UaHHTML5 Chinese Learning Network - HTML5 Pioneer Learning Network

Jquery.form.js ist ein Plug-in, das Formulare senden und senden kann Dateien asynchron hochladen. UaHHTML5 Chinese Learning Network – HTML5 Pioneer Learning Network

Beispiele sind wie folgt: UaHHTML5 Chinese Learning Network – HTML5 Pioneer Learning Network

index.html UaHHTML5 Chinese Learning Network-HTML5 Pioneer Learning Network

<!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.phpUaHHTML5 Chinese Learning Network-HTML5 Pioneer Learning Network

<? 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

UaHHTML5 Chinese Learning Network-HTML5 Pioneer Learning Network

Das obige ist der detaillierte Inhalt vonVerwendung von JQuery zur Implementierung der asynchronen Formularübermittlungs- und Datei-Upload-Funktionen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn