1. 直接上包 dwr 3.0 .jar down url:http://directwebremoting.org/dwr/downloads/。
2. 在xml 文件中加入 以下 配置:
!-- The DWR servlet. -->
<servlet><servlet-name>dwr-invoker</servlet-name><servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class><init-param><param-name>debug</param-name><param-value>true</param-value></init-param><init-param><param-name>crossDomainSessionSecurity</param-name><param-value>false</param-value></init-param></servlet><servlet-mapping><servlet-name>dwr-invoker</servlet-name><url-pattern>/dwr/*</url-pattern></servlet-mapping>3.Create 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="JSFileUpload"> 这个意思的是你后台的java 类转换成js 文件后供调用的js文件名称(指定名称,由系统自动生成。<param name="class" value="com.admin.bug.dwr.FileUpload" /> 这个value 就是你后台Java类的绝对地址。
</create></allow></dwr>
4.OK 环境搭好了 在jsp 页面上导入上述指定的js 文件名称以及 dwr相关的js 文件
<script type="text/javascript" src="dwr/engine.js"></script>
<script type="text/javascript" src="dwr/util.js"></script> <script type="text/javascript" src="dwr/interface/JSFileUpload.js"></script>
5.jsp 上传文件 主要代码
<input type="file" name="uploadfile" id="file"> 注意下红色的部分,这个等下特别提到!
<img class="closeimg" src="resources/image/cross.png" > <input type="submit" value="上传" id="upload-but">
6. jquery 操作
//dwr 文件上传
$("#upimge").click(function(){ $("#uploadInfo").html("正在上传.....");var file=dwr.util.getValue("uploadfile"); 这是就是dwr发挥作用的地方,获取的方式不能习以为常的使用id 而是name . //上传图片JSFileUpload.uploadImage(file,function(data){ 这个就是Java 类转换的js文件名称(自己定义的)去调用后台的Java 方法 这就实现了页面 调用后台方法跟在后台调用一样的方式 一样的爽。 //显示上传结果 $("#uploadInfo").html(data);if(data=="完成上传"){
$("#uploadInfo").css("color","cyan") //获取图片地址 JSFileUpload.getImgurl(file.value,function(data){ $("#imgshow").attr("src",data); })}else{ $("#imgshow").attr("src","resources/image/error2.png"); $("#uploadInfo").css("color","yellow") } });
7.上后台代码
public class FileUpload {
//文件上传 public String uploadImage(FileTransfer transfer) throws IOException //看这个方法就是刚才我们js调用的方法哦。 { //文件名称 String filename=transfer.getFilename(); //上传信息 String msg=null; if(filename.isEmpty()){ msg="请选择文件上传"; return msg; } //文件大小 long fileSize=transfer.getSize(); System.out.println("总量文件:"+fileSize); if(fileSize>(200*1024*1024)){ msg="文件过大"+fileSize/1024/1024+"MB"; return msg; } String editName=filename.substring(filename.lastIndexOf(".")+1, filename.length()); if(this.getFileType(editName).contains(editName)){ //保存地址 WebContext webContext = WebContextFactory.get(); String savePath=webContext.getHttpServletRequest(). getSession().getServletContext().getRealPath("/resources/uploadImage"); //保存文件夹 File folder=new File(savePath,filename); if(folder.exists()){ folder.mkdirs(); } try { InputStream in=transfer.getInputStream(); //缓冲流 BufferedInputStream buffin=new BufferedInputStream(in); //估计剩余资源 int available=buffin.available(); //转换成字节组 byte b[]=new byte[available]; System.out.println(b.length); //输出到指定文件夹 FileOutputStream foutput = new FileOutputStream(folder); //读取文件 in.read(b); //写入到指定文件 foutput.write(b); foutput.flush(); foutput.close(); System.out.println("上传成功"); msg="完成上传"; } catch (IOException e) { System.out.println(e.getMessage()); msg=e.getMessage(); } }else{ msg="不支持此格式文件"; }return msg;
}//获取文件有效性
@SuppressWarnings({ "rawtypes", "unchecked" }) public ArrayList getFileType(String editName) { ArrayList fileType=new ArrayList(); fileType.add("jpeg"); fileType.add("png"); fileType.add("pdf"); fileType.add("gif"); fileType.add("jpg"); fileType.add("xlsx"); return fileType; } //获取图片地址 public String getImgurl(String filename){ String finalname=FilenameUtils.getName(filename); String imgurl="resources/uploadImage/"+finalname; System.out.println(imgurl); return imgurl; }}