这学期忙于迎接学院评估和教学很久没有学新东西,昨天看了一下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" onclick="ajaxupload();"/><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:语言 à工具(规则) 特点: 开源(原代码,帮助手册,网络社区) 思想:thinking in java 、设计模式 gof。
今天要讲得内容：
1> ajsxFileUpload
2> 目的：
准备：
1． Jquery.js 库文件
http://bbs.jquery.org.cn/
2． ajaxFileUpload.js 库文件
http://www.phpletter.com/Our-Projects/AjaxFileUpload/
3. Jquery blockUi
4. smartUpload.jar 进行上传
开始做：
1. 开发一种试：先把服务器端处理页面做好。
2. 事件触发：ajaxupload()上传方法
1> 上传时锁定我们界面 blockUI.js 依赖于jquery.js
2> 上传 ajaxFilUpload.js jquery插件
--导入ajaxfileupload.js
--ajaxUploadFile方法说明：
|
$.ajaxFileUpload
(
{
url:'doajaxfileupload.php', //服务器处理地址
secureuri:false, // ?
fileElementId:'fileToUpload', // 上传文件域的ID
dataType: 'json', // 服务器返回数据格式
success: function (data, status)//上传成功后操作
{
if(typeof(data.error) != 'undefined')
{
if(data.error != '')
{
alert(data.error);
}else
{
alert(data.msg);
}
}
},
error: function (data, status, e) //有错误时进行操作
{
alert(e);
}
}
)
|
3> 完成过后解锁。
如果有兴趣:我把视频笔记和项目全部上传到了:
http://www.chubeibao.com/bbs/viewthread.php?tid=2396&extra=page%3D1
最近突然对flex 和fms感兴趣.如有这方面资料的朋友请共享.我将非常感谢!!!!!
分享到：
- 2008-12-20 16:48
- 浏览 5681
- 评论(0)
- 论坛回复 / 浏览 (0 / 13182)
- 查看更多
相关推荐
AJAXFileUpload是一种基于AJAX技术的异步文件上传组件，它允许用户在不刷新页面的情况下上传文件，并且可以实时显示上传进度，提供良好的用户体验。本文将深入探讨AJAXFileUpload的工作原理、实现方式以及其在实际...
AJAXFileUpload是实现这一功能的一种技术手段，它利用Ajax技术实现了文件的无刷新上传，同时结合进度条展示，使得用户可以清晰地看到文件上传的状态，提升用户体验。 **Ajax基础** Ajax（Asynchronous JavaScript ...
它利用Ajax技术，使得文件上传无需刷新页面即可完成。这极大地提升了用户体验，因为用户可以在上传文件的同时继续浏览其他内容。 3. **上传进度条**: 上传进度条是用户界面中显示文件上传状态的元素，它通常以...
ajaxfileupload ajax文件上传,ajax文件上传ajax文件上传ajax文件上传ajax文件上传ajax文件上传ajax文件上传
**AjaxFileUpload是基于JavaScript和Ajax技术的一种文件上传组件，它允许用户在不刷新整个页面的情况下实现异步文件上传。这种技术在Web开发中被广泛应用，因为它提供了良好的用户体验，允许用户在后台处理文件上传...
根据文件名，我们可以推断压缩包内可能包含的是一个或多个用于实现Ajax文件上传的源码文件。这些文件可能包括JavaScript脚本（用于客户端的文件选择和Ajax通信）、服务器端脚本（处理上传请求和存储文件）、以及可能...
AjaxFileUpload是基于JavaScript和AJAX技术的一种实现文件上传的方式，它允许用户在不刷新整个页面的情况下进行文件上传，提供了一种更为流畅的用户体验。在本文中，我们将深入探讨AjaxFileUpload的工作原理、如何...
AjaxFileUpload 是一个专门用于实现异步文件上传的JavaScript组件，它利用了Ajax技术，让用户可以在不刷新页面的情况下完成文件上传，提供了更为流畅和友好的用户体验。 AjaxFileUpload 的核心原理在于利用Ajax...
ajaxfileupload.js 这是个非常好的异步上传图片的插件，来解决form表单上传时要刷新页面的问题。支持多文件上传
ajaxfileupload.js用于文件上传
jQuery插件AjaxFileUpload用来实现ajax文件上传，该插件使用非常简单，接下来写个demo演示怎么用AjaxFileUpload插件实现文件上传。 1、引入AjaxFileUpload插件相关的js 复制代码 代码如下:[removed]resources/js/...
$.ajaxFileUpload 是一个jQuery插件，它提供了异步文件上传的能力，使得用户无需刷新页面即可完成文件提交，提高了用户体验。 $.ajaxFileUpload 的核心在于使用Ajax技术，它允许在后台与服务器交换数据并更新部分...
总结来说，Asp+Ajax文件上传技术是通过Asp处理服务器端逻辑，利用Ajax实现前端的无刷新交互，借助HTML5的File API进行文件选取和发送，从而实现多文件上传或批量文件上传的功能。这种技术提高了用户体验，减少了不必...
总的来说，AjaxFileUpload提供了一种优雅的解决方案，解决了传统文件上传导致页面刷新的问题，提高了Web应用的交互性和用户体验。不过，随着技术的发展，现代的Web开发框架如Vue、React等提供了更高级的文件上传组件...
在AJAX文件上传中，核心概念是利用HTML5的`FormData`对象和XMLHttpRequest Level 2（XHR2）的`FormData`支持。这些特性使得可以在后台处理文件上传，而无需离开当前页面。AjaxFileUpload.js库通过封装这些功能，提供...
本文将详细介绍如何使用Asp.Net MVC框架与Jquery的ajaxfileupload插件实现一个兼容主流浏览器的文件上传解决方案。 首先，Asp.Net MVC是一个强大的Web应用程序开发框架，它允许开发者构建动态、数据驱动的网站。它...
在文件上传场景中，jQuery可以帮助我们方便地处理DOM操作和Ajax请求。 ### AjaxFileUpload插件 AjaxFileUpload是jQuery的一个插件，专门用于实现异步文件上传。它利用Ajax技术实现了在不刷新页面的情况下上传文件，...
3. **事件监听**：AJAX文件上传过程中，可以监听XMLHttpRequest对象的事件，如`onreadystatechange`和`progress`，以便在文件上传过程中获取进度信息或处理错误。 ### `ajaxfileupload.js`的使用步骤 1. **引入库*...
在Web开发中，文件上传是一项常见的功能，AjaxFileUpload是一个基于JavaScript和AJAX技术的文件上传组件，它允许用户在不刷新页面的情况下实现异步文件上传。本实例将重点讲解如何在Spring MVC框架下利用...