在大型企业的开发过程中，很多比较有趣而实际的功能往往都是让大家望而却步，我给大家带来一个百度云盘和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. golang 多个routine之间的同步

    本文以一个例子的方式介绍channel在同步中的使用. 下面的例子中,主task首先阻塞,直到两个task完成后,再继续执行. package main import ( "log" ...

  2. debian下配置keepalived ha

    抄袭自http://blog.51yip.com/server/1417.html,做了一些修改 可以参考http://blog.linuxphp.org/archives/1615/ 备注:NAT模 ...

  3. jenkins的war包下载地址

    https://jenkins.io/doc/book/installing/

  4. java web 程序---jsp连接mysql数据库的实例基础+表格显示

    <%@ page language="java" import="java.util.*,java.sql.*" pageEncoding="g ...

  5. Java堆外内存之二：堆外内存使用总结

    目录: <堆外内存操作类ByteBuffer> <DirectBuffer> <Unsafe(java可直接操作内存(),挂起与恢复,CAS操作)> 有时候对内存进 ...

  6. 9-16Jenkins-2定时任务

    定时任务 选择定时任务,点击 "?" 会弹出使用教程,但讨厌英语的人,自然选择现成的中文. 猪脚踏浪https://www.cnblogs.com/zsg88/p/9178625. ...

  7. 什么是DSCP，如何使用DSCP标记搭配ROS策略

    一.什么是DSCP DSCP:差分服务代码点(Differentiated Services Code Point),IETF于1998年12月发布了Diff-Serv(Differentiated ...

  8. CA单向认证和双向认证的区别？

    1:单向认证,内容会被串改吗?

  9. php使用inotify实现队列处理

    php使用inotify实现队列处理参考如下文章:http://blog.jiunile.com/php%E4%BD%BF%E7%94%A8inotify%E5%AE%9E%E7%8E%B0%E9%9 ...

  10. Matlab2013a打开M文件乱码解决

    win10开发者英文版x64    Matlab2013a 解决方法:format改为chinese