dwr异步上传图片

这里需要用到commons-fileupload-1.2.2和commons-io-2.3

This is the web.xml 

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
	http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
	<servlet>
		<servlet-name>dwr-invoker</servlet-name>
		<servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class>
		<!-- 配置debug参数为true后,就可以访问DWR的控制台了,访问地址为

http://ip:port/webApp/dwr/ -->
		<!-- 开发阶段可以开启控制台,但在产品交付时,务必关掉控制台 -->
		<init-param>
			<param-name>debug</param-name>
			<param-value>true</param-value>
		</init-param>
	</servlet>

	<servlet-mapping>
		<servlet-name>dwr-invoker</servlet-name>
		<url-pattern>/dwr/*</url-pattern>
	</servlet-mapping>
</web-app>

This is DWR Config File----dwr.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 3.0//EN"
"http://getahead.org/dwr/dwr30.dtd">
<dwr>
	<allow>
		<create creator="new" javascript="JSUserManager">
			<param name="class" value="com.jadyer.dwr.UserManager" />
		</create>
	</allow>
</dwr>

下面是用于提交上传操作的前台页面upload.jsp

<%@ page language="java" pageEncoding="UTF-8"%>

<script type="text/javascript" src="<%=request.getContextPath

()%>/dwr/interface/JSUserManager.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/dwr/engine.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/dwr/util.js"></script>

<script type="text/javascript">
	function upload() {
		var file = dwr.util.getValue("myfile");
		alert(file.value);//不同浏览器在此处得到的值,不一定相同....IE9得到的是含全

路径的文件名,firefox12得到的是文件名
		alert(file);
		JSUserManager.upload(file, file.value, function(data){
			alert(data);
		});
	}
</script>

<input type="file" id="myfile"/>
<input type="button" value="上传文件" onclick="upload()"/>

最后是需要由DWR发布的UserManager.java

import java.io.File;
import java.io.IOException;
import java.io.InputStream;

import javax.servlet.http.HttpServletRequest;

import org.apache.commons.io.FileUtils;
import org.apache.commons.io.FilenameUtils;
import org.directwebremoting.WebContextFactory;

public class UserManager {
	/**
	 * 上传文件
	 * @param is       DWR会自动把dwr.util.getValue("myfile")转换为这里所需的

InputStream
	 * @param filename 不同浏览器传进来的值未必相同,IE9传是含全路径的文件名,firefox12

传的是文件名
	 * @return 文件的真实名字
	 */
	public String upload(InputStream is, String filename) throws IOException{
		String realname = FilenameUtils.getName(filename);                          

  //获取文件的真实名字
		HttpServletRequest request = WebContextFactory.get().getHttpServletRequest

(); //获取Servlet API
		String realpath = request.getSession().getServletContext().getRealPath

("/WEB-INF/upload");
		FileUtils.copyInputStreamToFile(is, new File(realpath, realname));
		return realname;
	}
}

补充:记得建立//WEB-INF//upload//

目录,其用于接收所上传的文件

时间: 2024-09-17 03:29:41

dwr异步上传图片的相关文章

使用Ajax异步上传图片的方法(html,javascript,php)

前两天项目中需要用到异步上传图片和显示上传进度的功能,于是找了很多外国的文章,翻山越岭地去遇上各种坑,这里写篇文章记录一下. HTML HTML代码没什么好说,一个form表单,还有文件类型的input.我们来看js部分. javascript //绑定了`submit`事件. $('#fileupload-form').on('submit',(function(e) { e.preventDefault(); //序列化表单 var serializeData = $(this).seria

java webApp异步上传图片实现代码_java

如何实现java webApp异步上传图片,先了解以下几个问题: 1.图片上传: 2.图片上传预览: 3.上传图片更改地址异步添加到数据库: 主要内容 本示例主要采用纯HTML前端和JavaScript代码作工具,查询有关demo其实现图片上传的代码范例如下: (1)点击上传图片的div代码: <div id="div1" class="photo"> <input type="file" id="choose&quo

Android异步上传图片到PHP服务器_Android

原理 Android客户端模拟一个HTTP的Post请求到服务器端,服务器端接收相应的Post请求后,返回响应信息给给客户端. 背景 网上很多上传到java服务器上的,找了好久,找到了上传到php的了,思路跟我当初想的差不多,就是POST过去.废话不多说,直接上图看代码. php代码 <?php $target_path = "./upload/";//接收文件目录 $target_path = $target_path . basename( $_FILES['uploaded

php+jquery Ajax异步上传图片(ajaxSubmit)实例

效果如下  代码如下 复制代码 index.php文件 php结合jquery异步上传图片(ajaxSubmit),以下为提交页面代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org

jquery的ajaxSubmit()异步上传图片并保存表单数据演示代码_jquery

(jsp需要引入 :jquery-1.9.0.js.jquery.form.js ) ,jsp页面使用的是bootstrap制作的,看不懂的标签不用管,form表单大同小异.代码比较简陋,只是为了演示使用ajaxSubmit异步上传图片及保存数据,请海含! (参考文献:http://www.jb51.net/shouce/jquery/jquery_api/Plugins/Form/ajaxSubmit.html) 一:web (add.jsp) 复制代码 代码如下: <%@page impor

Android异步上传图片到PHP服务器

原理 Android客户端模拟一个HTTP的Post请求到服务器端,服务器端接收相应的Post请求后,返回响应信息给给客户端. 背景 网上很多上传到java服务器上的,找了好久,找到了上传到php的了,思路跟我当初想的差不多,就是POST过去.废话不多说,直接上图看代码. php代码 <?php $target_path = "./upload/";//接收文件目录 $target_path = $target_path . basename( $_FILES['uploaded

ThinkPHP整合Uploadify插件实现异步上传图片

1.首先到官网下载Uploadify插件. 2.在页面引入uploadify.css.jquery.uploadify.min.js.当然你得先把jquery引入. 3.配置uploadify:  代码如下 复制代码 <script type="text/javascript">     $(function () {         var sid = '{:session_id()}';         $('#file_upload').uploadify({    

dwr 异步传递对象

注意在导入js文件时必须先导入系统的js,再导入自己的      <script type='text/javascript' src='jquery.js'></script> <script type='text/javascript' src='dwr/engine.js'></script>      <script type='text/javascript' src='dwr/util.js'></script>    

jquery的ajaxSubmit()异步上传图片并保存表单数据演示代码

 一:web (add.jsp)   代码如下: <%@page import="com.fingerknow.project.vo.UserInformation"%>  <%@ page language="java" contentType="text/html; charset=utf-8"  pageEncoding="utf-8"%>  <%@ taglib uri="htt