高效Web开发的10个jQuery代码片段
411
2024-02-24
本文实例为大家分享了AjaxFileUpload实现文件上传的具体代码，供大家参考，具体内容如下
jQuery插件AjaxFileUpload用来实现ajax文件上传，该插件使用非常简单，接下来写个demo演示怎么用AjaxFileUpload插件实现文件上传。
1、引入AjaxFileUpload插件相关的js
<script type="text/javascript" src="http://www.gimoo.net/t/1903/<%=basePath%>resources/js/jquery-1.2.1.js"></script> <script type="text/javascript" src="http://www.gimoo.net/t/1903/<%=basePath%>resources/js/ajaxfileupload.js"></script>
备注：测试发现，ajaxfileupload对jQuery版本是有要求的，在使用中ajaxfileupload和jQuery对应的js版本要一致，不然会导致异常发生，可以从ajaxfileupload官网下载，避免版本冲突。
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="http://www.gimoo.net/t/1903/<%=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="http://www.gimoo.net/t/1903/validate/ajaxfileupload.css" />
<script type="text/javascript" src="http://www.gimoo.net/t/1903/validate/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="http://www.gimoo.net/t/1903/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="http://www.gimoo.net/t/1903/<%=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>
更多精彩内容请参考专题《ajax上传技术汇总》，《javascript文件上传操作汇总》和《jQuery上传操作汇总》进行学习。
以上就是本文的全部内容，希望对大家学习jquery程序设计有所帮助。
