JQuery-Formular zum Implementieren des Datei-Uploads-js-Tutorial-php.cn

JQuery-Formular zum Implementieren des Datei-Uploads

不言

Freigeben： 2018-07-18 16:02:39

Original

1487 Leute haben es durchsucht

Der hier geteilte Inhalt ist ein Formular-Plug-in jquery.form.js, das die Übermittlung von Ajax-Formularen und den Ajax-Upload unterstützt.

Wenn Sie es verwenden, müssen Sie Folgendes zum Code hinzufügen:

<script src="http://malsup.github.io/jquery.form.js />

Nach dem Login kopieren

Hier werden wir über die Verwendung von jquery.form für Ajax sprechen Formular hochladen.

//js示例
function example(){
	
        //定义ajax提交时的url等
	var option={
			url:"revise",
			method:"post",
			contentType:false,
			success:function(data){
				if(data=="1"){
					alert("上传成功!");
					$("#ff").resetForm(); //清空表单
				}else{
					alert("上传失败！");}
			},
	};
　　　　　//调用jquery.form的api ajaxSubmit进行上传，option为上面所编写的上传规定参数
	$("#ff").ajaxSubmit(option);  //ff为表单id
	return false;
}

Nach dem Login kopieren

Wenn Sie jquery.form zum Senden eines Ajax-Formulars verwenden und es Vorschriften zum Übermittlungspfad usw. gibt, müssen Sie ein Optionsobjekt schreiben und Fügen Sie die Auszeichnungs-URL in die Option ein usw. Treffen Sie Vorkehrungen für das Schreiben. Abschließend wird die API ajaxSubmit aufgerufen, um das Formular hochzuladen.

Der obere Teil ist der js-Teil, der untere Teil ist der h5-Teil

 1 <%@ page language="java" contentType="text/html; charset=UTF-8" 
 2      pageEncoding="UTF-8"%> 
 3   
 4  <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
 5  <html> 
 6  <head> 
 7  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
 8  <title>jquery.form上传文件</title> 
 9  </head>10  <body>
 11      <form id="ff">
 12  　　　　<input type="text"  name="name" />
 13  　　　　<input type="text"  name="age" />
 14         <input type="file" name="pic" id="pic"accept="image/png, image/jpeg, image/jpg"  />
 15  　　　　<button  type="button"  id="submitButton" value="确认" />
 16      </form>17  
 18 <script src="http://malsup.github.io/jquery.form.js"></script>
 19  <script type="text/javascript">
 20  $("#submitButton").click(function () { //按钮点击事件
 21  var option={
 22              url:"revise",
 23              method:"post",
 24              success:function(data){
 25                  if(data=="1"){
 26                      alert("上传成功!");
 27                     $("#ff").resetForm();
 28                      $("#add").html("");
 29                  }else{
 30                      alert("上传失败！");}             },
 31      };
 32      $("#ff").ajaxSubmit(option);
 33      return false;
 34  });
 35  </script>
 36  </body>
 37 </html>

Nach dem Login kopieren

Innerhalb des Formulars muss jedes Eingabe-Tag eingegeben werden Hochzuladen muss der Attributname hinzugefügt und korrekt benannt werden.

Die Verwendung von jquery.form.js zum Hochladen des Formulars sieht folgendermaßen aus.

Dies ist die Verwendung von jquery.form.js, die ich persönlich zusammengefasst habe, nachdem ich die Informationen überprüft hatte, als ich vor einiger Zeit an einem Projekt arbeitete.

Verwandte Empfehlungen:

So senden Sie ein Formular und implementieren den Datei-Upload mit Ajax

JS-Beispielcode zum Implementieren des Multi-Datei-Uploads der Formform

Das obige ist der detaillierte Inhalt vonJQuery-Formular zum Implementieren des Datei-Uploads. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!