html 页面代码
1 <%@ page language="java" contentType="text/html; charset=utf-8" 2 pageEncoding="utf-8"%> 3 <%@ include file="/includes/ctx.jsp" %> 4 <!DOCTYPE html> 5 <html> 6 <head> 7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 8 <title>java 开发拖拽文件上传系统</title> 9 10 <script type="text/javascript" src="${ctx}/js/jquery-1.11.2.js" ></script> 11 12 <style type="text/css"> 13 *{margin:0;padding:0;} 14 body{font-size:12px;font-family:"微软雅黑";color:#666} 15 img{border:0;} 16 .upload{width:800px;height:240px;margin:50px auto;} 17 .upload .u_logo{text-align:center} 18 .upload .u_box{width:640px;height:130px;border:3px dashed #E6E6E6;margin:0 auto; font-size:36px;color:#D1D1D1;text-align:center;line-height:130px;} 19 20 .pic{width:840px;height:300px;margin:0 auto;} 21 .pic ul li {color:#fff;list-style:none;float:left;margin:0 3px 3px 3px;} 22 .pic ul li a:hover img{-webkit-transform:scale(1.5)} 23 24 </style> 25 </head> 26 <body> 27 <div class="upload"> 28 <div class="u_logo"> 29 </div> 30 <div class="u_box" id="drop_area"> 31 将文件拖拽到此处 32 </div> 33 </div> 34 <div class="pic"> 35 <ul> 36 </ul> 37 </div> 38 39 <script type="text/javascript" > 40 41 $().ready(function(){ 42 /* $('#dtb-msg1 .compatible').show(); 43 $('#dtb-msg1 .notcompatible').hide(); 44 $('#drop_zone_home').hover(function(){ 45 $(this).children('p').stop().animate({top:'0px'},200); 46 },function(){ 47 $(this).children('p').stop().animate({top:'-44px'},200); 48 }); */ 49 //功能实现 50 $(document).on({ 51 dragleave:function(e){ 52 e.preventDefault(); 53 //$('.dashboard_target_box').removeClass('over'); 54 $("#drop_area").removeClass("over"); 55 }, 56 drop:function(e){ 57 e.preventDefault(); 58 //$('.dashboard_target_box').removeClass('over'); 59 }, 60 dragenter:function(e){ 61 e.preventDefault(); 62 //$('.dashboard_target_box').addClass('over'); 63 $("#drop_area").addClass("over"); 64 }, 65 dragover:function(e){ 66 e.preventDefault(); 67 //$('.dashboard_target_box').addClass('over'); 68 $("#drop_area").addClass("over"); 69 } 70 }); 71 var box = document.getElementById('drop_area'); 72 box.addEventListener("drop",function(e){ 73 e.preventDefault(); 74 //获取文件列表 75 var fileList = e.dataTransfer.files; 76 var img = document.createElement('img'); 77 document.body.appendChild(img); 78 79 //检测是否是拖拽文件到页面的操作 80 if(fileList.length == 0){ 81 $('.dashboard_target_box').removeClass('over'); 82 return; 83 } 84 alert("获取的长度为"+fileList.length); 85 //检测文件是不是图片 86 alert(fileList[0].type); 87 alert(fileList[0].type.indexOf('image')); 88 /* if(fileList[0].type.indexOf('image') == -1){ 89 $('.dashboard_target_box').removeClass('over'); 90 return; 91 } */ 92 93 alert("开始上传"+fileList[0].name); 94 //实例化file reader对象 95 var reader = new FileReader(); 96 reader.onload = function(e){ 97 img.src = e.target.result; 98 }; 99 reader.readAsDataURL(fileList[0]); 100 101 /* if($.browser.safari){ 102 //Chrome8+ 103 alert("Chrome8"); 104 img.src = window.webkitURL.createObjectURL(fileList[0]); 105 }else if($.browser.mozilla){ 106 //FF4+ 107 alert("ff4"); 108 img.src = window.URL.createObjectURL(fileList[0]); 109 }else{ 110 alert("else"); 111 //实例化file reader对象 112 var reader = new FileReader(); 113 reader.onload = function(e){ 114 img.src = this.result; 115 $(document.body).appendChild(img); 116 }; 117 reader.readAsDataURL(fileList[0]); 118 } */ 119 return ; 120 var xhr = new XMLHttpRequest(); 121 xhr.open("post", "${ctx}//upload.do", true); 122 //告诉服务器是以个Ajax 请求 123 xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest"); 124 125 var fd = new FormData(); 126 fd.append("doc",fileList[0]); 127 fd.append("doc",fileList[1]); 128 fd.append("name","zfy"); 129 xhr.send(fd); 130 },false); 131 }); 132 133 </script> 134 </body> 135 </html>
后台servlet处理
1 package com; 2 3 import java.io.File; 4 import java.io.FileOutputStream; 5 import java.io.IOException; 6 import java.io.InputStream; 7 import java.io.OutputStream; 8 import java.util.Date; 9 import java.util.List; 10 11 import javax.servlet.ServletException; 12 import javax.servlet.http.HttpServlet; 13 import javax.servlet.http.HttpServletRequest; 14 import javax.servlet.http.HttpServletResponse; 15 16 import org.apache.commons.fileupload.FileItem; 17 import org.apache.commons.fileupload.FileUploadException; 18 import org.apache.commons.fileupload.disk.DiskFileItemFactory; 19 import org.apache.commons.fileupload.servlet.ServletFileUpload; 20 21 /** 22 * Servlet implementation class UploadServlet 23 */ 24 public class UploadServlet extends HttpServlet { 25 private static final long serialVersionUID = 1L; 26 27 /** 28 * @see HttpServlet#HttpServlet() 29 */ 30 public UploadServlet() { 31 super(); 32 } 33 34 /** 35 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse 36 * response) 37 */ 38 protected void doGet(HttpServletRequest request, 39 HttpServletResponse response) throws ServletException, IOException { 40 doPost(request, response); 41 } 42 43 /** 44 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse 45 * response) 46 */ 47 protected void doPost(HttpServletRequest request, 48 HttpServletResponse response) throws ServletException, IOException { 49 // TODO Auto-generated method stub 50 System.out.println("进入上传的servlet"); 51 52 // 获得磁盘文件条目工厂 53 DiskFileItemFactory factory = new DiskFileItemFactory(); 54 // 获取文件需要上传到的路径 55 // String path = request.getRealPath("/upload"); 56 String path = "d:/shangchuan/"; 57 58 // 如果文件夹不存在 将创建文件夹 59 if (!new File(path).exists()) { 60 new File(path).mkdirs(); 61 } 62 63 // 如果没以下两行设置的话，上传大的 文件 会占用 很多内存， 64 // 设置暂时存放的 存储室 , 这个存储室，可以和 最终存储文件 的目录不同 65 /** 66 * 原理 它是先存到 暂时存储室，然后在真正写到 对应目录的硬盘上， 按理来说 当上传一个文件时，其实是上传了两份，第一个是以 .tem 67 * 格式的 然后再将其真正写到 对应目录的硬盘上 68 */ 69 factory.setRepository(new File(path)); 70 // 设置 缓存的大小，当上传文件的容量超过该缓存时，直接放到 暂时存储室 71 factory.setSizeThreshold(1024 * 1024); 72 73 // 高水平的API文件上传处理 74 ServletFileUpload upload = new ServletFileUpload(factory); 75 76 try { 77 // 可以上传多个文件 78 List<FileItem> list = (List<FileItem>) upload.parseRequest(request); 79 80 for (FileItem item : list) { 81 // 获取表单的属性名字 82 String name = item.getFieldName(); 83 84 // 如果获取的 表单信息是普通的 文本 信息 85 if (item.isFormField()) { 86 // 获取用户具体输入的字符串 ，名字起得挺好，因为表单提交过来的是 字符串类型的 87 String value = item.getString(); 88 89 System.out.println("name:" + name); 90 91 System.out.println("value:" + value); 92 93 request.setAttribute(name, value); 94 } 95 // 对传入的非 简单的字符串进行处理 ，比如说二进制的 图片，电影这些 96 else { 97 /** 98 * 以下三步，主要获取 上传文件的名字 99 */ 100 // 获取路径名 101 String value = item.getName(); 102 // 索引到最后一个反斜杠 103 int start = value.lastIndexOf("\"); 104 // 截取 上传文件的 字符串名字，加1是 去掉反斜杠， 105 String filename = value.substring(start + 1); 106 // 将当前时间戳 作为的文件名 107 String newfilename = Long.toString(new Date().getTime()) 108 + filename.substring(filename.indexOf('.')); 109 request.setAttribute(name, newfilename); 110 111 // 真正写到磁盘上 112 // 它抛出的异常 用exception 捕捉 113 114 // item.write( new File(path,filename) );//第三方提供的 115 116 // 手动写的 117 OutputStream out = new FileOutputStream(new File(path, 118 newfilename)); 119 120 InputStream in = item.getInputStream(); 121 122 int length = 0; 123 byte[] buf = new byte[1024]; 124 125 System.out.println("获取上传文件的总共的容量：" + item.getSize()); 126 127 // in.read(buf) 每次读到的数据存放在 buf 数组中 128 while ((length = in.read(buf)) != -1) { 129 // 在 buf 数组中 取出数据 写到 （输出流）磁盘上 130 out.write(buf, 0, length); 131 132 } 133 134 in.close(); 135 out.close(); 136 } 137 } 138 139 } catch (FileUploadException e) { 140 // TODO Auto-generated catch block 141 e.printStackTrace(); 142 } catch (Exception e) { 143 // TODO Auto-generated catch block 144 145 e.printStackTrace(); 146 } 147 System.out.println("走到最后"); 148 149 } 150 151 }