本文實例為大家分享了AjaxFileUpload實現(xiàn)文件上傳的具體代碼，供大家參考，具體內(nèi)容如下
jQuery插件AjaxFileUpload用來實現(xiàn)ajax文件上傳，該插件使用非常簡單，接下來寫個demo演示怎么用AjaxFileUpload插件實現(xiàn)文件上傳。
1、引入AjaxFileUpload插件相關(guān)的js
代碼如下:
<script type="text/javascript" src="<%=basePath%>resources/js/jquery-1.2.1.js"></script>
<script type="text/javascript" src="<%=basePath%>resources/js/ajaxfileupload.js"></script>
備注：測試發(fā)現(xiàn)，ajaxfileupload對jQuery版本是有要求的，在使用中ajaxfileupload和jQuery對應(yīng)的js版本要一致，不然會導(dǎo)致異常發(fā)生，可以從ajaxfileupload官網(wǎng)下載，避免版本沖突。
2、實現(xiàn)上傳功能代碼
<%@ 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, //一般設(shè)置為false
fileElementId: 'file', // 上傳文件的id、name屬性名
dataType: 'text', //返回值類型，一般設(shè)置為json、application/json
elementIds: elementIds, //傳遞參數(shù)到服務(wù)器
success: function(data, status){
alert(data);
},
error: function(data, status, e){
alert(e);
}
});
//return false;
}
</script>
</head>
<body>
<div id="wait_loading">
<div><img src="<%=path %>/images/loading.gif"/></div>
<br></br>
<div><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>
以上就是本文的全部內(nèi)容，希望對大家學(xué)習(xí)jquery程序設(shè)計有所幫助。