jquery表单实现文件的上传

来源：尚车旅游网

这里给大家分享的内容是一个form插件jquery.form.js，支持ajax表单提交和ajax上传。

　　使用时，需要在代码中添加如下：

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

　　这里讲一下，使用jquery.form进行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;
}

　　使用jquery.form进行ajax表单提交时，如若对提交路径等有规定，则需要编写一个option对象，在option中过奖url等进行编写规定。最后则调用api ajaxSubmit进行表单上传。

　　上面为js部分，下面为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>

　　表单内，需要上传的各个input标签必须要添加属性name，并正确命名。

　　使用jquery.form.js上传表单就是这样。

　　这是前段时间做项目时，使用常用ajax提交表单信息出错，查阅过资料后，个人总结出来的使用jquery.form.js的用法。