标签：
在大型企业的开发过程中，很多比较有趣而实际的功能往往都是让大家望而却步，我给大家带来一个百度云盘和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>
标签：
原文地址：http://www.cnblogs.com/zengda/p/4355039.html
