jquery表单实现文件的上传
程序员文章站
2022-04-11 09:02:36
...
这里给大家分享的内容是一个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的用法。
相关推荐：
以上就是jquery表单实现文件的上传的详细内容，更多请关注其它相关文章！