ajaxfileupload ajax文件上传
这学期忙于迎接学院评估和教学很久没有学新东西,昨天看了一下ajaxfileupload文件上传的插件,试做了一下效果不出,于是录制了视频.具体代码如下:请求页面:index.jsp
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
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>My JSP 'index.jsp' starting page</title>
<script type="text/javascript" src="js/jquery-1.2.6.js"></script>
<script type="text/javascript" src="js/jquery.blockUI.js"></script>
<script type="text/javascript" src="js/ajaxfileupload.js"></script>
</head>
<script type="text/javascript">
function ajaxupload()
{
$.blockUI.defaults.fadeOut=4500;
//1.ajax开始上传前锁定界面
//$.blockUI({message:"<img src='imgs/loading.gif'/>文件上传中..."});
$("#start").ajaxStart(function(){
$.blockUI({message:"<img src='imgs/loading.gif'/>文件上传中..."});
});
//2.上传
$.ajaxFileUpload
(
{
url:'doFileUpload.jsp',
secureuri:false,
fileElementId:'upfile',
dataType: 'json',
success: function (data, status)
{
//如果文件上传成功
$.blockUI({message:data.msg});
},
error: function (data, status, e)
{
$.blockUI({message:data.erro});
}
}
)
//3 .ajax完成解锁
$("#start").ajaxComplete(function(){
$.unblockUI();
});
}
</script>
<body>
<div id="start"></div>
<form action="doFileUpload.jsp" method="post" enctype="multipart/form-data">
<input type="file" name="upfile" id="upfile"/><input type="button" value="ajaxfileupload" /><input type="submit" value="upload"/>
</form>
</body>
</html>
////////////////////////////////////////////////////////////////////////////////////////////
服务器处理页面:doFileUpload.jsjp
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ page import="com.jspsmart.upload.*"%>
<%
//smartupload 就是一个文件上传的javabean
//1.创建一个smartupload 类的对象
SmartUpload sm = new SmartUpload();
//2. 把传来byte数据进行封装 进行初始化
sm.initialize(pageContext);
//3. 准备上传
sm.upload();
//4.保存上传文件
int i=sm.save("/upload/");//smartupload 默认时需要文件上传的路径是存在,
if(i>0)
{
out.println("{msg:'文件上传成功!!!'}");
}
else
{
out.println("{erro:'文件有错误'}");
}
%>
//////////////////////////////////////////////////////////////
笔记:
学习方法问题:
Java:<span style="font-size: small;">语言 à工具(规则) 特点: 开源(原代码,帮助手册,网络社区) 思想:thinking in java 、设计模式 gof。
<span style="font-size: small;">今天要讲得内容：
1> ajsxFileUpload
2> <span style="font-size: small;">目的：
<span style="font-size: small;">准备：
1． Jquery.js <span style="font-size: small;">库文件
http://bbs.jquery.org.cn/
2． ajaxFileUpload.js 库文件
http://www.phpletter.com/Our-Projects/AjaxFileUpload/
3. Jquery blockUi
<span style="font-size: small;"> 4. smartUpload.jar 进行上传
<span style="font-size: small;">开始做：
1. <span style="font-size: small;">开发一种试：先把服务器端处理页面做好。
2. <span style="font-size: small;">事件触发：ajaxupload()上传方法
1> 上传时锁定我们界面 blockUI.js 依赖于jquery.js
2> <span style="font-size: small;">上传 ajaxFilUpload.js jquery插件
--导入ajaxfileupload.js
<span style="font-size: small;">--ajaxUploadFile方法说明：
$.ajaxFileUpload
(
{
url:'doajaxfileupload.php', //<span style="font-size: small;">服务器处理地址
secureuri:false, // ?
fileElementId:'fileToUpload', // 上传文件域的ID
<span style="font-size: small;"> dataType: 'json', // 服务器返回数据格式
<span style="font-size: small;"> success: function (data, status)//上传成功后操作
{
if(typeof(data.error) != 'undefined')
{
if(data.error != '')
{
alert(data.error);
}else
{
alert(data.msg);
}
}
},
<span style="font-size: small;"> error: function (data, status, e) //有错误时进行操作
{
alert(e);
}
}
)
3> 完成过后解锁。<span />
如果有兴趣:我把视频笔记和项目全部上传到了:
http://www.chubeibao.com/bbs/viewthread.php?tid=2396&extra=page%3D1
最近突然对flex 和fms感兴趣.如有这方面资料的朋友请共享.我将非常感谢!!!!!
页:
[1]