本文執行個體為大家分享了AjaxFileUpload實現檔案上傳的具體代碼，供大家參考，具體內容如下
jQuery外掛程式AjaxFileUpload用來實現ajax檔案上傳，該外掛程式使用非常簡單，接下來寫個demo示範怎麼用AjaxFileUpload外掛程式實現檔案上傳。
1、引入AjaxFileUpload外掛程式相關的js
2、實現上傳功能代碼
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%@ include file="/base.jsp" %><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <base href="<%=basePath%>"> <title>ajax檔案上傳</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <link rel="stylesheet" type="text/css" href="validate/ajaxfileupload.css" /> <script type="text/javascript" src="validate/jquery-1.6.2.min.js"></script> <script type="text/javascript" src="validate/ajaxfileupload.js" ></script> <script type="text/javascript"> $(function(){ //上傳圖片 $("#btnUpload").click(function() { alert(ajaxFileUpload()); }); }); function ajaxFileUpload() { // 開始上傳檔案時顯示一個圖片 $("#wait_loading").ajaxStart(function() { $(this).show(); // 檔案上傳完成將圖片隱藏起來 }).ajaxComplete(function() { $(this).hide(); }); var elementIds=["flag"]; //flag為id、name屬性名稱 $.ajaxFileUpload({ url: 'uploadAjax.htm', type: 'post', secureuri: false, //一般設定為false fileElementId: 'file', // 上傳檔案的id、name屬性名稱 dataType: 'text', //傳回值類型，一般設定為json、application/json elementIds: elementIds, //傳遞參數到伺服器 success: function(data, status){ alert(data); }, error: function(data, status, e){ alert(e); } }); //return false; } </script> </head> <body> <div id="wait_loading" style="padding: 50px 0 0 0;display:none;"> <div style="width: 103px;margin: 0 auto;"><img src="<%=path %>/images/loading.gif"/></div> <br></br> <div style="width: 103px;margin: 0 auto;"><span>請稍等...</span></div> <br></br> </div> <input type="file" id="file" name="file"><br/> <input type="hidden" id="flag" name="flag" value="ajax檔案上傳"/> <input type="button" id="btnUpload" value="上傳圖片" /> </body></html>
更多精彩內容，請點擊《jQuery上傳操作匯總》，進行深入學習和研究。
以上就是本文的全部內容，希望對大家學習jquery程式設計有所協助。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
