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

    <wsdl:definitions xmlns:wsdl="http://schemas.xmlsoap.org/wsdl/" xmlns:ns1="http:// ...

  2. 【python】class之类属性

    class Foo(object): x=1.5 foo=Foo() print foo.x#通过实例访问类属性 >>>1.5 print Foo.x #通过类访问类属性 >& ...

  3. 实验三：C分支结构程序设计

    3.1 #include<stdio.h> int main(){ char a; scanf("%c",&a); if(a>=65&&a ...

  4. 关于UC、火狐、谷歌浏览器屏蔽布局中广告的解决办法

     关于UC浏览器屏蔽了广西人才网的名企.品牌.热点的logo,是因为当成广告过滤掉了,以后div的class和id不能以“ad”开头.这可能只是其中一个规则,adxxxx是可以的,不能是adXxxx, ...

  5. 如何使input双击时不显示历史记录

    原文地址:http://highping.iteye.com/blog/359428 HTML的输入框可以拥有自动完成的功能,当你往输入框输入内容的时候,浏览器会从你以前的同名输入框的历史记录中查找出 ...

  6. Jenkins git鬼畜集

    1. Jnekins服务重启后,莫名奇妙就报403错误,内网OK,把内网IP换成外网域名又可以. 莫名其妙解决:点了下notfiy后的Add,然后重输了一次密码,好了....但是这是新增一个账号啊!! ...

  7. Linux中的ls命令详细使用

    ls命令是linux下最常用的命令之一,ls跟dos下的dir命令是一样的都是用来列出目录下的文件,下面我们就来一起看看ls的用法 英文全名:List即列表的意思,当我们学习某种东西的时候要做到知其所 ...

  8. mysql互为主从

    摘自:http://flash520.blog.163.com/blog/static/3441447520101029114016823/ A B 为两台MySQL服务器,均开启二进制日志,数据库版 ...

  9. Oracle跨库复制表结构

    1.首先建立远程连接 create public database link LINK_SJPSconnect to system identified by manager using '(DESC ...

  10. iOS 基础

    layoutSubviews: layoutSubviews是对sbuviews的重新布局,比如,我们想更新子视图的位置,可以通过调用layoutSubviews方法(不能直接调用) layoutSu ...