jQuery插件AjaxFileUpload实现ajax文件上传
本文实例为大家分享了AjaxFileUpload实现文件上传的具体代码，供大家参考，具体内容如下
jQuery插件AjaxFileUpload用来实现ajax文件上传，该插件使用非常简单，接下来写个demo演示怎么用AjaxFileUpload插件实现文件上传。
1、引入AjaxFileUpload插件相关的js
<scripttype="text/javascript"src="<%=basePath%>resources/js/jquery-1.2.1.js"></script> <scripttype="text/javascript"src="<%=basePath%>resources/js/ajaxfileupload.js"></script>
备注：测试发现，ajaxfileupload对jQuery版本是有要求的，在使用中ajaxfileupload和jQuery对应的js版本要一致，不然会导致异常发生，可以从ajaxfileupload官网下载，避免版本冲突。
2、实现上传功能代码
<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%>
<%@includefile="/base.jsp"%>
<%
Stringpath=request.getContextPath();
StringbasePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">
<html>
<head>
<basehref="<%=basePath%>">
<title>ajax文件上传</title>
<metahttp-equiv="pragma"content="no-cache">
<metahttp-equiv="cache-control"content="no-cache">
<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">
<metahttp-equiv="expires"content="0">
<metahttp-equiv="keywords"content="keyword1,keyword2,keyword3">
<metahttp-equiv="description"content="Thisismypage">
<linkrel="stylesheet"type="text/css"href="validate/ajaxfileupload.css"/>
<scripttype="text/javascript"src="validate/jquery-1.6.2.min.js"></script>
<scripttype="text/javascript"src="validate/ajaxfileupload.js"></script>
<scripttype="text/javascript">
$(function(){
//上传图片
$("#btnUpload").click(function(){
alert(ajaxFileUpload());
});
});
functionajaxFileUpload(){
//开始上传文件时显示一个图片
$("#wait_loading").ajaxStart(function(){
$(this).show();
//文件上传完成将图片隐藏起来
}).ajaxComplete(function(){
$(this).hide();
});
varelementIds=["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);
}
});
//returnfalse;
}
</script>
</head>
<body>
<divid="wait_loading"style="padding:50px000;display:none;">
<divstyle="width:103px;margin:0auto;"><imgsrc="<%=path%>/images/loading.gif"/></div>
<br></br>
<divstyle="width:103px;margin:0auto;"><span>请稍等...</span></div>
<br></br>
</div>
<inputtype="file"id="file"name="file"><br/>
<inputtype="hidden"id="flag"name="flag"value="ajax文件上传"/>
<inputtype="button"id="btnUpload"value="上传图片"/>
</body>
</html>
更多精彩内容请参考专题《ajax上传技术汇总》，《javascript文件上传操作汇总》和《jQuery上传操作汇总》进行学习。
以上就是本文的全部内容，希望对大家学习jquery程序设计有所帮助。