DWR与Ajax实现文件上传的实践示例
下载需积分: 9 | 565KB |
更新于2025-07-23
| 144 浏览量 | 举报
1
收藏
立即下载 DWR（Direct Web Remoting）是一个开源库，用于在浏览器中以JavaScript的形式调用Java方法。它极大地简化了AJAX应用的开发，使得Web开发人员可以更方便地实现浏览器端和服务器端的直接通信。在本节中，我们将详细探讨如何使用DWR实现一个简单的AJAX文件上传示例。
### 1. DWR基础
DWR的主要功能是允许在JavaScript代码中调用Java对象的方法，就像调用本地JavaScript函数一样。DWR通过反向HTTP调用实现远程调用，它可以自动处理浏览器和服务器之间的JSON数据交换。
### 2. 文件上传
在Web开发中，文件上传是一个常见需求，传统的表单上传方式需要页面刷新，用户体验较差。通过DWR，我们可以利用AJAX技术实现无刷新的文件上传，提高用户体验。
### 3. 实例实现
#### 3.1 配置DWR
要使用DWR，首先需要在项目中引入DWR的库文件，并配置DWR引擎，以便让DWR知道哪些Java类和方法可以被公开给浏览器端调用。通常这通过在WEB-INF目录下的dwr.xml文件中配置完成。
示例配置代码如下：
```xml
<allow>
<create creator="new" javascript="UploadService">
<param name="className" value="com.example.UploadService"/>
</create>
</allow>
```
上述配置定义了一个名为`UploadService`的服务，允许JavaScript代码调用`com.example.UploadService`类中的方法。
#### 3.2 创建Java上传服务
为了实现文件上传功能，需要创建一个`UploadService`类，此类需要实现文件上传的逻辑。
```java
package com.example;
import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import org.directwebremoting.annotations.RemoteMethod;
import org.directwebremoting.annotations.RemoteProxy;
@RemoteProxy
public class UploadService {
@RemoteMethod
public String uploadFile(String name, byte[] data) {
// 文件上传逻辑
File targetFile = new File("uploaded_files/" + name);
try (FileOutputStream fos = new FileOutputStream(targetFile)) {
fos.write(data);
fos.flush();
} catch (IOException e) {
e.printStackTrace();
}
return "上传成功";
}
}
```
在这个简单的服务类中，`uploadFile`方法接收文件名和文件字节数据，将文件保存到服务器指定目录并返回上传成功的消息。
#### 3.3 JavaScript实现AJAX上传
DWR提供的JavaScript库可以帮助我们方便地调用Java服务。下面是一个简单的HTML和JavaScript代码示例，展示了如何使用DWR进行文件上传。
```html
<!DOCTYPE html>
<html>
<head>
<title>DWR 文件上传示例</title>
<script type="text/javascript" src="/dwr/engine.js"></script>
<script type="text/javascript" src="/dwr/util.js"></script>
<script type="text/javascript">
function uploadFile() {
var file = document.getElementById("fileInput").files[0];
dwr.engine.upload("uploadFile", [file.name, file], function(responseText){
alert("上传完成：" + responseText);
});
}
</script>
</head>
<body>
<input type="file" id="fileInput" />
<button onclick="uploadFile()">上传</button>
</body>
</html>
```
在这个示例中，当用户选择文件后点击上传按钮，`uploadFile` JavaScript函数被触发。DWR引擎开始上传文件，将文件名和文件内容一起发送到服务器端的`uploadFile`方法。服务器处理文件后返回结果，用户可以看到上传是否成功。
### 4. 总结
通过DWR实现AJAX上传非常方便，只需要简单的配置和编写一些JavaScript与Java代码。除了基本的文件上传功能，DWR还支持文件上传进度监听、文件上传前的校验等功能。DWR的易用性和强大的功能使得它成为许多Java Web开发人员的首选库之一。
了解和实践以上知识点，可以让开发人员更快速地掌握使用DWR进行文件上传的方法，从而在开发中提升效率和用户体验。
资源目录
DWR与Ajax实现文件上传的实践示例 （32个子文件） 
dwr.xml 305B upload.css 123B UploadInfo.class 2KB MonitoredOutputStream.class 1KB
commons-logging.jar 37KB .project 1KB UploadMonitor.class 1KB EncodingFilter.java 1KB FileUploadServlet.class 5KB EncodingFilter.class 1KB OutputStreamListener.java 288B .classpath 668B MANIFEST.MF 39B FileUploadServlet.java 5KB OutputStreamListener.class 248B index.jsp 2KB org.eclipse.ltk.core.refactoring.prefs 137B dwr.jar 478KB MonitoredDiskFileItemFactory.java 1KB upload.js 2KB MonitoredDiskFileItem.class 1KB MonitoredDiskFileItem.java 1KB web.xml 1KB MonitoredOutputStream.java 1KB commons-fileupload-1.1.jar 31KB UploadListener.java 2KB .mymetadata 306B MonitoredDiskFileItemFactory.class 1KB UploadListener.class 2KB UploadMonitor.java 489B commons-io-1.1.jar 60KB UploadInfo.java 2KB共 32 条
- 1
相关推荐
myaric
- 粉丝: 5
我的内容管理
展开
最新资源
- 操作系统第六版英文PPT完整解析与系统组件
- 仿QQ2008聊天程序的C#实现教程
- 简易jQuery弹出层插件实现指南
- Linux与UNIX Shell编程：新手入门经典指南
- AutoCAD作图速度提升训练工具
- PC游戏编程与博弈论：详解搜索算法及源码
- My97 DatePicker 4.0正式版：全面升级的Web日期控件
- 软件项目开发文档提纲的完整指南
- 误删文件不再怕，一键轻松恢复工具揭秘
- Symbian S60 资源管理器源代码及数据库示例
- C语言实现24位bmp到256色位图的转换
- Spring Hibernate Struts快速入门教程指南
- 初学者适用的简单图片管理工具介绍
- 深入解析USB系统原理与体系结构
- 基于JSP的多功能文章管理系统设计
- Web日期输入：功能强大的JavaScript日历控件
- 经典算法解析：晕线填充与图形交点求解技巧
- 《雪融化的时刻》全CG存档攻略与分享
- JavaEE 5.0-api.zip下载与J2EE开发文档参考指南
- 性格多样性与职业成功之路（HTML版解析）
- Windows NT原生API PDF格式文档解析
- 深入探索MooPHP框架：安全、高效与易用
- 深入理解面向对象程序设计（C++课件）
- Java分词程序实现：四万词库量源码解析
