formulaire jquery pour implémenter le téléchargement de fichiers-js tutoriel-php.cn

formulaire jquery pour implémenter le téléchargement de fichiers

不言

Libérer： 2018-07-18 16:02:39

original

1394 Les gens l'ont consulté

Le contenu partagé ici est un plug-in de formulaire jquery.form.js, qui prend en charge la soumission de formulaires ajax et le téléchargement ajax.

Lorsque vous l'utilisez, vous devez ajouter ce qui suit au code :

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

Copier après la connexion

Ici, je vais parler de l'utilisation de jquery.form pour le téléchargement de formulaire ajax.

//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;
}

Copier après la connexion

Lorsque vous utilisez jquery.form pour la soumission d'un formulaire ajax, s'il existe des réglementations sur le chemin de soumission, etc., vous devez écrire un objet option et gagner le prix dans l'URL de l'option, etc. sont requis pour l'écriture. Enfin, l'API ajaxSubmit est appelée pour télécharger le formulaire.

La partie supérieure est la partie js, la partie inférieure est la partie h5

 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>

Copier après la connexion

Dans le formulaire, chaque balise d'entrée qui doit être téléchargé, vous devez ajouter le nom de l'attribut et le nommer correctement.

Utiliser jquery.form.js pour télécharger le formulaire, c'est comme ça.

Il s'agit de l'utilisation de jquery.form.js que j'ai personnellement résumée après avoir examiné les informations lorsque je travaillais sur un projet il y a quelque temps.

Recommandations associées :

Comment soumettre un formulaire et implémenter le téléchargement de fichiers avec ajax

Exemple de code JS pour implémenter le téléchargement multi-fichiers de formulaire formulaire

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!