在大型企业的开发过程中，很多比较有趣而实际的功能往往都是让大家望而却步，我给大家带来一个百度云盘和360云盘的HTML5多文件拖动上传技术：

1：记得导入:common-fileupload.jar包.

上传upload.jsp页面

<%@page import="org.apache.struts2.json.JSONUtil"%>

<%@page import="java.io.File"%>

<%@page import="org.apache.commons.fileupload.FileItem"%>

<%@page import="org.apache.commons.fileupload.servlet.ServletFileUpload"%>

<%@page import="org.apache.commons.fileupload.disk.DiskFileItemFactory"%>

<%@page import="org.apache.commons.fileupload.FileItemFactory"%>

<%@page import="java.text.DecimalFormat"%>

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<%

 request.setCharacterEncoding("UTF-8");

 response.setCharacterEncoding("UTF-8");

 //获取文件的上传的具体目录

 String realPath = request.getRealPath("/");

 //定义上传的目录

 String dirPath = realPath+"/upload";

 File dirFile = new File(dirPath);

 //自动创建上传的目录

 if(!dirFile.exists())dirFile.mkdirs();

 //上传操作

  FileItemFactory factory = new DiskFileItemFactory();

 //

   ServletFileUpload upload = new ServletFileUpload(factory);

 String fileName = null;

 HashMap<String,Object> map = new HashMap<String,Object>();

  try{

      List items = upload.parseRequest(request);  //3name=null name=null

   if(null != items){

          Iterator itr = items.iterator();

          while(itr.hasNext()){

              FileItem item = (FileItem)itr.next();

              if(item.isFormField()){

                  continue;

              }else{

              fileName = item.getName();

              int pos = fileName.lastIndexOf(".");

              String ext = fileName.substring(pos, fileName.length());

                 fileName = UUID.randomUUID().toString()+ext;

 //上传文件的目录

                 File savedFile = new File(dirPath,fileName);

                 item.write(savedFile);

                 map.put("name",item.getName());//文件的原始名称

                 map.put("newName",fileName);//文件的新名称

                 map.put("size",item.getSize());//文件的真实大小

                 map.put("url","upload/"+fileName);//获取文件的具体服务器的目录

                 //我可以建立一个文件表。把上传的文件存在表中.--文件夹表一个文件表---云盘

              }

          }

   }

 }catch(Exception e){  

 }

  out.print(JSONUtil.serialize(map));

%>

main.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML>

<html>

  <head>

    <title>潭州学院html5拖动文件上传</title>

 <style>

 *{padding:0px;margin:0px}

 body{font-family: "微软雅黑";font-size: 12px;background: #394E48;color:#fff;}

 .demo{width:900px; margin:50px auto;position: relative;}

 #drop_area{width:100%; height:100px; border:3px dashed silver; line-height:100px; text-align:center; font-size:36px; color:#d3d3d3}

 #preview{width:900px; overflow:hidden;border:1px dashed silver; margin-top:10px;}

 #preview div{float: left;padding: 9px;text-align: center;margin:6px;background:#f9f9f9;width:195px;height: 160px;}

 #preview img{width: 80px;height: 80px;}

 #program{background:#999; height:100px;color:#d3d3d3;position: absolute;top:0px;left:0px;background:linear-gradient(#141414,red);opacity:0.5}

 </style>

  </head>

  <body>

   <div id="main">

    <div class="demo">

     <div style="text-align: center;margin-bottom: 20px;"><h1 style="font-size: 36px;">潭州学院首席架构师--KeKe老师(QQ:792185203)</h1></div>

     <div id="program"></div>

 <div id="drop_area">将图片拖拽到此区域</div>

 <div id="preview"></div>

    </div>

 </div>

   <script type="text/javascript">

   var timer = null;

   //拖离事件-离开的时候调用

   document.ondragleave =function(e){

   e.preventDefault();

   document.getElementById("drop_area").style.background="none";

   console.log("拖动移动离开的时候");

   };

   //拖方后

   document.ondrop =function(e){

   e.preventDefault();

   document.getElementById("drop_area").style.background="none";

   document.getElementById("drop_area").innerHTML = "请稍后，文件上传中...";

   var p = 0;

   timer = setInterval(function(){

   if(p>=100)p=0;

   document.getElementById("program").style.width=p+"%";

   p++;

   },17);

   console.log("拖动抬起的时候");

   };

   //拖动移动的时候

   document.ondragover =function(e){

   e.preventDefault();

   document.getElementById("drop_area").style.background="linear-gradient(#141414,#ff0000)";

   console.log("拖动移动的时候");

   };

   document.ondragenter =function(e){

   e.preventDefault();

   document.getElementById("drop_area").style.background="#141414";

   console.log("拖动按下的时候");

   };

   function tmupload(){

   var box = document.getElementById("drop_area"); //拖拽区域

   box.addEventListener("drop",function(e){//监听拖放后事件

   e.preventDefault();//取消浏览器的默认行为

   //获取文件对象

   var fileList = e.dataTransfer.files;

   //检查是否拖拽文件到页面

   var length = fileList.length;

   if(length==0){

   return false;

   }

   for(var i=0;i<length;i++){

   var img = window.webkitURL.createObjectURL(fileList[i]);

   var filename = fileList[i].name;

   var filesize = fileList[i].size;

   var str = "<div><img src='"+img+"'><p>图片名称："+filename+"</p><p>大小："+filesize+"KB</p></div>";

   document.getElementById("preview").innerHTML +=str;

   //通过XMLHttpRequest(ajax)上传

   var xhr = new XMLHttpRequest();

   xhr.open("post","upload.jsp", true);

   xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");

   //利用FormData动态发送表单数据

   var fd = new FormData();

   fd.append("doc", fileList[i]);

   xhr.send(fd);

   xhr.onreadystatechange = function(){

   if(xhr.readyState==4 && xhr.status==200){

   setTimeout(function(){

    clearInterval(timer);

    document.getElementById("drop_area").innerHTML = "请稍后，文件上传中...";

    document.getElementById("program").style.width="0%";

   },2000);

   }

   };

   }

   });

   }

   tmupload();//开始上传

   </script>

  </body>

</html>

HTML实现文件拖动上传的更多相关文章

  1. html5+php实现文件拖动上传功能

    界面样式我是参考了一个国外的相册网站,改动不大,只是把鸟语转换成中文,以及上传时的样式也进行了改动,之所以选这个的原因就是,我很容易做扩展,它支持3种方式添加图片,一种拖拽上传,一种常规的选择文件上传 ...

  2. 带进度条的文件批量上传插件uploadify

    有时项目中需要一个文件批量上传功能时,个人认为uploadify是快速简便的解决方案. 先上效果图: 一. 下载uploadify 从官网下载uploadify的Flash版本(Flash版本免费,另 ...

  3. C# 用原生JS进行文件的上传

    1.此文章是用原生JS来进行文件的上传,有两个版本,一个不用ajax,一个用ajax. 1)非AJAX <!DOCTYPE html> <html> <head> ...

  4. ssh整合问题总结--在添加商品模块实现图片(文件)的上传

    今天在做毕设(基于SSH的网上商城项目)中碰到了一个文件上传的需求,就是在后台管理员的商品模块中,有一个添加商品,需要将磁盘上的图片上传到tomcat保存图片的指定目录中: 完成这个功能需要两个步,第 ...

  5. 文件的上传(如何兼容火狐与IE)与国际化的原理

    1.文件的上传     [1] 简介         > 将本地的文件上传到服务器中         > 用户需要通过一个表单将文件上传到服务器中       [2] 表单的设置     ...

  6. java实现ftp文件的上传与下载

    最近在做ftp文件的上传与下载,基于此,整理了一下资料.本来想采用java自带的方法,可是看了一下jdk1.6与1.7的实现方法有点区别,于是采用了Apache下的框架实现的... 1.首先引用3个包 ...

  7. 在SpringMVC框架下实现文件的 上传和 下载

    在eclipse中的javaEE环境下:导入必要的架包 web.xml的配置文件: <?xml version="1.0" encoding="UTF-8" ...

  8. .Net多文件同时上传（Jquery Uploadify）

    前提:领导给了我一个文件夹,里面有4000千多张产品图片,每张图片已产品编号+产品名称命名,要求是让我把4000多张产品图片上传到服务器端,而且要以产品编码创建n个文件夹,每张图片放到对应的文件夹下. ...

  9. mac下svn问题——“.a”(静态库)文件无法上传解决

    mac下svn问题——“.a”(静态库)文件无法上传解决    “.a”(静态库)文件无法上传(svn工具:Versions)          网上查询了一下,说是Xcode自带的svn和Versi ...

随机推荐

  1. ASP.NET实现Cookie功能的三个基本操作（写入，读取，删除）

      说正事 简而言之,在Cookie的时候有三个过程,分别是“写入,读取,删除”.任何伟大之作都是有基本的东西构成的,而Cookie的运用也不例外. 写入: 1 //创建一个HttpCookie对象 ...

  2. linux 信号处理 一 (基本概念)

    信号是Linux编程中非常重要的部分,本文将详细介绍信号机制的基本概念.Linux对信号机制的大致实现方法.如何使用信号,以及有关信号的几个系统调用. 信号机制是进程之间相互传递消息的一种方法,信号全 ...

  3. TS流的解析

    个字节不一定都是有效数据,有一些可能为填充数据). 工作形式: 因为在TS流里可以填入很多种东西,所以有必要有一种机制来确定怎么来标识这些数据.制定TS流标准的机构就规定了一些数据结构来定义.比如: ...

  4. BEGIN-4_蓝桥杯_Fibonacci数列

    问题描述 Fibonacci数列的递推公式为:Fn=Fn-+Fn-,其中F1=F2=. 当n比较大时,Fn也非常大,现在我们想知道,Fn除以10007的余数是多少. 输入格式 输入包含一个整数n. 输 ...

  5. 【Oracle学习笔记-5--】集合操作之union，intersect和minus操作

    --union并操作 select e.employee_id,e.last_name from hr.employees e where e.last_name like 'C%' union se ...

  6. 转！！！解释Eclipse下Tomcat项目部署路径问题(.metadata\.plugins\org.eclipse.wst.server.core\tmp0\wtpwebapps)

    1.配置eclipse的开发环境,配置jdk的安装路径和tomcat安装路径. 2.在eclipse下建立Dynamic Web Project工程zhgy,在使用eclipse中new一个tomca ...

  7. python 用到的函数记录

    1. ctime() 获取当前的时间 2. import  random random.randint(0,99) 随机产生0到99之间的数值 (包含0和99) (整数!!) 3. 往列表添加数值 l ...

  8. 学习笔记之数据库Database

    SQL@Wiki http://en.wikipedia.org/wiki/SQL 一篇文章,掌握所有开源数据库的现状 - AI前线 https://mp.weixin.qq.com/s?__biz= ...

  9. 错误：Unsupported major.minor version 51.0（jdk版本错误）

    Java.lang.UnsupportedClassVersionError: org/apache/nutch/crawl/Crawl3 : Unsupported major.minor vers ...

  10. shell 1基础

    shell简介 shell是一个用C语言编写的程序,是用户使用Linux的桥梁.shell既是一种命令语言,又是一种程序设计语言. shell脚本(shell script),是一种为shell编写的 ...