jquery form to implement file upload-JS Tutorial-php.cn

jquery form to implement file upload

不言

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

Original

1485 people have browsed it

The content shared with you here is a form plug-in jquery.form.js, which supports ajax form submission and ajax upload.

When using it, you need to add the following to the code:

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

Copy after login

Here we will talk about using jquery.form for ajax form upload.

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

Copy after login

When using jquery.form to submit an ajax form, if there are regulations on the submission path, etc., you need to write an option object and add the URL in the option. Make provisions for writing. Finally, the api ajaxSubmit is called to upload the form.

The above is the js part, and the following is the h5 part

 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>

Copy after login

In the form, each input tag that needs to be uploaded must add the attribute name, and Name it correctly.

This is how you use jquery.form.js to upload a form.

This is the usage of jquery.form.js that I personally summarized after reviewing the information when I was working on a project some time ago.

Related recommendations:

How to submit form form and implement file upload with ajax

JS example code to implement form form multi-file upload

The above is the detailed content of jquery form to implement file upload. For more information, please follow other related articles on the PHP Chinese website!