HTML实现文件拖动上传
在大型企业的开发过程中,很多比较有趣而实际的功能往往都是让大家望而却步,我给大家带来一个百度云盘和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实现文件拖动上传的更多相关文章
- html5+php实现文件拖动上传功能
界面样式我是参考了一个国外的相册网站,改动不大,只是把鸟语转换成中文,以及上传时的样式也进行了改动,之所以选这个的原因就是,我很容易做扩展,它支持3种方式添加图片,一种拖拽上传,一种常规的选择文件上传 ...
- 带进度条的文件批量上传插件uploadify
有时项目中需要一个文件批量上传功能时,个人认为uploadify是快速简便的解决方案. 先上效果图: 一. 下载uploadify 从官网下载uploadify的Flash版本(Flash版本免费,另 ...
- C# 用原生JS进行文件的上传
1.此文章是用原生JS来进行文件的上传,有两个版本,一个不用ajax,一个用ajax. 1)非AJAX <!DOCTYPE html> <html> <head> ...
- ssh整合问题总结--在添加商品模块实现图片(文件)的上传
今天在做毕设(基于SSH的网上商城项目)中碰到了一个文件上传的需求,就是在后台管理员的商品模块中,有一个添加商品,需要将磁盘上的图片上传到tomcat保存图片的指定目录中: 完成这个功能需要两个步,第 ...
- 文件的上传(如何兼容火狐与IE)与国际化的原理
1.文件的上传 [1] 简介 > 将本地的文件上传到服务器中 > 用户需要通过一个表单将文件上传到服务器中 [2] 表单的设置 ...
- java实现ftp文件的上传与下载
最近在做ftp文件的上传与下载,基于此,整理了一下资料.本来想采用java自带的方法,可是看了一下jdk1.6与1.7的实现方法有点区别,于是采用了Apache下的框架实现的... 1.首先引用3个包 ...
- 在SpringMVC框架下实现文件的 上传和 下载
在eclipse中的javaEE环境下:导入必要的架包 web.xml的配置文件: <?xml version="1.0" encoding="UTF-8" ...
- .Net多文件同时上传(Jquery Uploadify)
前提:领导给了我一个文件夹,里面有4000千多张产品图片,每张图片已产品编号+产品名称命名,要求是让我把4000多张产品图片上传到服务器端,而且要以产品编码创建n个文件夹,每张图片放到对应的文件夹下. ...
- mac下svn问题——“.a”(静态库)文件无法上传解决
mac下svn问题——“.a”(静态库)文件无法上传解决 “.a”(静态库)文件无法上传(svn工具:Versions) 网上查询了一下,说是Xcode自带的svn和Versi ...
随机推荐
- ASP.NET实现Cookie功能的三个基本操作(写入,读取,删除)
说正事 简而言之,在Cookie的时候有三个过程,分别是“写入,读取,删除”.任何伟大之作都是有基本的东西构成的,而Cookie的运用也不例外. 写入: 1 //创建一个HttpCookie对象 ...
- linux 信号处理 一 (基本概念)
信号是Linux编程中非常重要的部分,本文将详细介绍信号机制的基本概念.Linux对信号机制的大致实现方法.如何使用信号,以及有关信号的几个系统调用. 信号机制是进程之间相互传递消息的一种方法,信号全 ...
- TS流的解析
个字节不一定都是有效数据,有一些可能为填充数据). 工作形式: 因为在TS流里可以填入很多种东西,所以有必要有一种机制来确定怎么来标识这些数据.制定TS流标准的机构就规定了一些数据结构来定义.比如: ...
- BEGIN-4_蓝桥杯_Fibonacci数列
问题描述 Fibonacci数列的递推公式为:Fn=Fn-+Fn-,其中F1=F2=. 当n比较大时,Fn也非常大,现在我们想知道,Fn除以10007的余数是多少. 输入格式 输入包含一个整数n. 输 ...
- 【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 ...
- 转!!!解释Eclipse下Tomcat项目部署路径问题(.metadata\.plugins\org.eclipse.wst.server.core\tmp0\wtpwebapps)
1.配置eclipse的开发环境,配置jdk的安装路径和tomcat安装路径. 2.在eclipse下建立Dynamic Web Project工程zhgy,在使用eclipse中new一个tomca ...
- python 用到的函数记录
1. ctime() 获取当前的时间 2. import random random.randint(0,99) 随机产生0到99之间的数值 (包含0和99) (整数!!) 3. 往列表添加数值 l ...
- 学习笔记之数据库Database
SQL@Wiki http://en.wikipedia.org/wiki/SQL 一篇文章,掌握所有开源数据库的现状 - AI前线 https://mp.weixin.qq.com/s?__biz= ...
- 错误:Unsupported major.minor version 51.0(jdk版本错误)
Java.lang.UnsupportedClassVersionError: org/apache/nutch/crawl/Crawl3 : Unsupported major.minor vers ...
- shell 1基础
shell简介 shell是一个用C语言编写的程序,是用户使用Linux的桥梁.shell既是一种命令语言,又是一种程序设计语言. shell脚本(shell script),是一种为shell编写的 ...