Home > Article > Web Front-end > jquery form to implement file upload

jquery form to implement file upload

不言Original: 2018-07-18 16:02:391434browse

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

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

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>

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!

jquery ajax JS 对象 input

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Submit the form: How to submit the form in jsNext article：Submit the form: How to submit the form in js

See more

jquery form to implement file upload

Related articles