在大型企业的开发过程中，很多比较有趣而实际的功能往往都是让大家望而却步，我给大家带来一个百度云盘和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. 使用Jquery实现Win8开始菜单效果的站点导航

    前言: 本人是个Metro控,自我感觉到处都充斥着Metro的元素,个人认为这种风格强调表现以及内容,以简洁著称,不过也不是大部分都喜欢,也有一些人和你讨厌这种风格~不过本人非常喜欢这种风格,看我博客 ...

  2. ALGO-5_蓝桥杯_算法训练_最短路

    记: 一开始没接触过关于最短距离的算法,便开始翻阅关于图的知识, 得知关于最短距离的算法有Dijkstra算法(堆优化暂未看懂),Bellman-Ford算法,Floyd算法,SPFA算法. 由于数据 ...

  3. Java-Runoob-高级教程-实例-数组：06. Java 实例 – 数组获取最大和最小值

    ylbtech-Java-Runoob-高级教程-实例-数组:06. Java 实例 – 数组获取最大和最小值 1.返回顶部 1. Java 实例 - 数组获取最大和最小值  Java 实例 以下实例 ...

  4. Linux下查看某个进程占用的CPU、内存

    1.用top命令指定固定的PID top -p 10997 查询指定进程的PID ps -ef | grep zookeeper jim 10997 1959 0 12月14 pts/2 00:00: ...

  5. word2vec剖析,资料整理备存

    声明:word2vec剖析,资料整理备存,以下资料均为转载,膜拜大神,仅作学术交流之用. word2vec是google最新发布的深度学习工具,它利用神经网络将单词映射到低维连续实数空间,又称为单词嵌 ...

  6. ExtJS模板与菜单的使用案例-床位卡

    ExtJS的模板的使用: 项目中场景基本就是表格模型: TPL:自己编写模板 store:数据源 UI组件: tbar,rbr,bbar实现工具栏 PageBar与StatusBar:可以针对TPL的 ...

  7. event事件传播规则

    参考原文:https://my.oschina.net/u/1454562/blog/205010 event事件传播有三个阶段:捕获阶段.目标阶段.冒泡阶段 target.addEventListe ...

  8. SQL中去掉字符串中最后一个字符(小技巧)

    --长度减一就可以了 select left(字段名,len(字段名)-1) from 表名

  9. 并发基础（三） java线程优先级

      在不同的JVM中(JVM也算是一个操作系统),有着不同的CPU调度算法,对于大部分的JVM来说,优先级也是调度算法中的一个参数.所以,线程优先级在一定程度上,对线程的调度执行顺序有所影响,但不能用 ...

  10. Python之函数——内置函数

    内置函数(Built-in Functions) 截止到3.6版本,python一共为我们提供了68个内置函数.它们就是python提供给的可以直接拿来使用的所有函数,接下来让我们一起认识一下这些函数 ...