這裡要跟大家分享的內容是一個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表單實作檔案的上傳的詳細內容。更多資訊請關注PHP中文網其他相關文章!