在大型企业的开发过程中，很多比较有趣而实际的功能往往都是让大家望而却步，我给大家带来一个百度云盘和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. 【python】实例-创建文件并通过键盘输入字符

    import os lnend=os.linesep ##windows行结束符号是“\r\n” FileName=raw_input("please input filename:&quo ...

  2. 【python】class之类的定义

    使用class定义类,可以提供一个可选的父类或者基类,如果没有合适的基类,那就使用object作为基类,也可以不写.class FooClass (object)或者class FooClass: v ...

  3. Django的 admin管理工具

    admin组件使用 Django 提供了基于 web 的管理工具. Django 自动管理工具是 django.contrib 的一部分.你可以在项目的 settings.py 中的 INSTALLE ...

  4. SqlBulkCopy(批量复制)使用方法

    SqlBulkCopy提供了一种将数据复制到Sql Server数据库表中高性能的方法.SqlBulkCopy 包含一个方法 WriteToServer,它用来从数据的源复制数据到数据的目的地. Wr ...

  5. ios之block笔记

    目测和函数指针基本类似用法,贴个hello world,备用 typedef int (^TestBlock)(int val1,int val2); __block ;//这里加__block是为了 ...

  6. java 网络编程TCP

    客户端 服务端

  7. RDD之四：Value型Transformation算子

    处理数据类型为Value型的Transformation算子可以根据RDD变换算子的输入分区与输出分区关系分为以下几种类型: 1)输入分区与输出分区一对一型 2)输入分区与输出分区多对一型 3)输入分 ...

  8. [UE4]通过代码改变材质

    OrangeMaterial = ConstructorStatics.OrangeMaterial.Get(); , OrangeMaterial); 使用到的结构体如下: struct FCons ...

  9. mvc和mtv

    Java中MVC详解以及优缺点总结 概念: MVC全名是Model View Controller,是模型(model)-视图(view)-控制器(controller)的缩写,一种软件设计典范,用一 ...

  10. linux-centos6/7初始配置

    关闭防火墙 chkconfig iptables off centos7下的命令为 systemctl stop firewalld.service #停止Firewall systemctl dis ...