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 ...
随机推荐
- 【python】正则表达式-正则表达式常见的字符和符号表
正则表达式常见的字符和符号表:
- 10个CSS+HOVER 的创意按钮
CSS hover 样式很简单,但是想创造出有意思.实用.有创意性的特效是很考验设计师的创意能力,所以设计达人每隔一段时间都会分享一些与鼠标点击.悬停的相关特效,以便大家获得更好的创造灵感. 今天我们 ...
- 【Spring学习笔记-MVC-12】Spring MVC视图解析器之ResourceBundleViewResolver
场景 当我们设计程序界面的时候,中国人希望界面是中文,而美国人希望界面是英文. 我们当然希望后台代码不需改变,系统能够通过配置文件配置,来自己觉得是显示中文界面还是英文界面. 这是,Spring mv ...
- Java网络编程（读书笔记）
部分片段: 早期web服务器由于Http链接短暂而有所掩盖,由于web页面和嵌入式的图片一般很小(至少与通常通过FTP获取软件包要小很多),由于web浏览器在获取各个文件后挂起连接,而不是一次保持数分 ...
- Logstash之四：配置说明
logstash配置文件包含三个配置部分: 分别为:input{}.filter{}.output{}.{} 定义区域,区域内可以定义一个或多个插件,通过插件对数据进行收集,加工处理,输出. 在{}配 ...
- ASP.NET Web Pages：对象
ylbtech-.Net-ASP.NET Web Pages:对象 1.返回顶部 1. ASP.NET Web Pages - 对象 Web Pages 经常是跟对象有关的. Page 对象 您已经看 ...
- 给easyui datebox扩展一个清空按钮
/** * 给时间框控件扩展一个清除的按钮 */ $.fn.datebox.defaults.cleanText = '清空'; (function ($) { var buttons = $.ext ...
- centos svn 的搭建
一. SVN 简介 Subversion(SVN) 是一个开源的版本控制系統, 也就是说 Subversion 管理着随时间改变的数据. 这些数据放置在一个中央资料档案库(repository) 中. ...
- [UE4]场景光照改进PostProcessVolume
PostProcessVolume可以做的效果很多,其中就可以实现太阳光斑效果. Unbound勾上上,就表示不受“PostProcessVolume”组件的大小限制,直接应用到整个世界.如果不勾选, ...
- [UE4]让AI跑起来
让AI由静止状态变成跑步状态,做法跟玩家角色走路一样. 一.创建1D混合动画 二.在AI角色关联的动画蓝图中使用第一步创建的混合动画