HTML5拖拽文件到浏览器并实现文件上传下载

最新推荐文章于 2022-05-10 13:56:49 发布

veryoldman

最新推荐文章于 2022-05-10 13:56:49 发布

阅读量4.6k

点赞数

分类专栏： javascript jsp html5 java 文章标签： html5 文件上传下载拖拽

本文链接：https://blog.csdn.net/a578559967/article/details/9034679

版权

java 同时被 3 个专栏收录

4 篇文章 0 订阅

订阅专栏

javascript

3 篇文章 0 订阅

订阅专栏

jsp

1 篇文章 0 订阅

订阅专栏

先上代码，写的jsp页面，后台是tomcat服务器，所以页面里有一些java的代码，如果后台用其他语言可以无视：

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@page import="java.io.*"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>上传、下载文件</title>
<style type="text/css">
#filedrag {
	display: none;
	font-weight: bold;
	text-align: center;
	padding: 1em 0;
	margin: 1em 0;
	color: #555;
	border: 2px dashed #555;
	border-radius: 7px;
	cursor: default;
}

#filedrag.hover {
	color: #f00;
	border-color: #f00;
	border-style: solid;
	box-shadow: inset 0 3px 4px #888;
}
</style>
</head>
<body>
	<form id="upload" action="UploadServlet" enctype="multipart/form-data"
		method="post" οnsubmit="return upLoad();">
		<p>
			<label for="fileselect">file name:</label><input multiple="true"
				type="file" id="fileselect" name="fileselect[]" />
		<div id="filedrag">或者将文件拖拽到这里</div>
		<div id="submitbutton">
			<input type="submit" value="提交">
		</div>
	</form>
	<div id="messages">		
	</div>
	<% //java代码，显示服务器上可以供下载的文件
		File f = new File("G://defggg/");
		File[] list = f.listFiles();
		for (int i = 0; i < list.length; ++i) {
			System.out.println(list[i].getName());
			out.print("<a href='DownloadServlet?filename="
					+ list[i].getName() + "'>" + list[i].getName()
					+ "</a><br/>");
		}
	%>
	<script type="text/javascript">
		var upfiles = new Array();
		// getElementById
		function $id(id) {
			return document.getElementById(id);
		}

		// output information
		function Output(msg) {
			var m = $id("messages");
			m.innerHTML = msg + m.innerHTML;
		}

		// file drag hover
		function FileDragHover(e) {
			e.stopPropagation();
			e.preventDefault();
			e.target.className = (e.type == "dragover" ? "hover" : "");
		}

		// file selection
		function FileSelectHandler(e) {

			// cancel event and hover styling
			FileDragHover(e);

			// fetch FileList object
			var files = e.target.files || e.dataTransfer.files;

			// process all File objects
			for ( var i = 0, f; f = files[i]; i++) {
				ParseFile(f);
				upfiles.push(f);
			}
				

		}

		// output file information
		function ParseFile(file) {

			Output("<p>文件信息: <strong>" + file.name
					+ "</strong> 类型: <strong>" + file.type
					+ "</strong> 大小: <strong>" + file.size
					+ "</strong> bytes</p>");
		}
		function upLoad() {
			if (upfiles[0]) {
				var xhr = new XMLHttpRequest();   //Ajax异步传输数据
				xhr.open("POST", "UploadServlet", true);
				var formData = new FormData();
				for ( var i = 0, f; f = upfiles[i]; i++) {
					formData.append('myfile', f);
				}
				xhr.send(formData);
				xhr.onreadystatechange=function(e){
					history.go(0);  //由于这个页面还要显示可以下载的文件，所以需要刷新下页面
				}				
				return false;
			}
		}
		// initialize
		function Init() {

			var fileselect = $id("fileselect"), filedrag = $id("filedrag"), submitbutton = $id("submitbutton");

			// file select
			fileselect.addEventListener("change", FileSelectHandler, false);

			// is XHR2 available?
			var xhr = new XMLHttpRequest();
			if (xhr.upload) {

				// file drop
				filedrag.addEventListener("dragover", FileDragHover, false);
				filedrag.addEventListener("dragleave", FileDragHover, false);
				filedrag.addEventListener("drop", FileSelectHandler, false);
				filedrag.style.display = "block";
				// remove submit button
				//submitbutton.style.display = "none";
			}

		}

		// call initialization file
		if (window.File && window.FileList && window.FileReader) {
			Init();
		}
	</script>
</body>
</html>

附上后台处理上传下载的servlet，用了smartUpLoad，不能很好的解决中文问题：

package com.hit.software;

import java.io.IOException;

import javax.servlet.ServletConfig;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.jspsmart.upload.Files;
import com.jspsmart.upload.SmartUpload;

/**
 * Servlet implementation class UploadServlet
 */
@WebServlet("/UploadServlet")
public class UploadServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
	private ServletConfig config;

	final public void init(ServletConfig config) throws ServletException {
		this.config = config;
	}

	/**
	 * @see HttpServlet#HttpServlet()
	 */
	public UploadServlet() {
		super();
		// TODO Auto-generated constructor stub
	}

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse
	 *      response)
	 */
	protected void doGet(HttpServletRequest request,
			HttpServletResponse response) throws ServletException, IOException {
		doPost(request, response);
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse
	 *      response)
	 */
	protected void doPost(HttpServletRequest request,
			HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("UTF-8");
		// String s = request.getParameter("pic");
		// System.out.println(s);
		SmartUpload mySmartUpload = new SmartUpload();
		try {
			mySmartUpload.initialize(config, request, response);
			mySmartUpload.setMaxFileSize(150 * 1024 * 1024);
			mySmartUpload.setTotalMaxFileSize(150 * 1024 * 1024);
			// mySmartUpload.setAllowedFilesList("doc,txt,rar,pdf,png");
			mySmartUpload.setDeniedFilesList("exe");
			mySmartUpload.upload();
			Files f = mySmartUpload.getFiles();
			int size = f.getCount();
			for (int i = 0; i < size; ++i) {
				String fileName = mySmartUpload.getFiles().getFile(i)
						.getFileName();
				fileName = new String(fileName.trim().getBytes(), "UTF-8"); //能解决部分中文问题
				System.out.println("filename=" + fileName);
				if (!fileName.equals("")) {
					String path = "g:/defggg/" + fileName;
					f.getFile(i).saveAs(path, SmartUpload.SAVE_PHYSICAL);
				}
			}
		} catch (Exception e) {
			e.printStackTrace();
			System.out.println("Unable to upload the file.");
			System.out.println("Error :" + e.toString());
		}
		response.sendRedirect("index.jsp");
	}
}

package com.hit.software;

import java.io.File;
import java.io.IOException;

import javax.servlet.ServletConfig;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.jsp.JspFactory;
import javax.servlet.jsp.JspWriter;
import javax.servlet.jsp.PageContext;

import com.jspsmart.upload.SmartUpload;
import com.jspsmart.upload.SmartUploadException;

/**
 * Servlet implementation class DownloadServlet
 */
@WebServlet("/DownloadServlet")
public class DownloadServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
	private ServletConfig config;

	/**
	 * @see HttpServlet#HttpServlet()
	 */
	public DownloadServlet() {
		super();
		// TODO Auto-generated constructor stub
	}

	final public void init(ServletConfig config) throws ServletException {
		this.config = config;
	}

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse
	 *      response)
	 */
	protected void doGet(HttpServletRequest request,
			HttpServletResponse response) throws ServletException, IOException {
		doPost(request, response);
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse
	 *      response)
	 */
	protected void doPost(HttpServletRequest request,
			HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("UTF-8");
		String fileName = request.getParameter("filename");
		System.out.println("down :"+fileName);
		if (fileName == null) {
			response.sendRedirect("index.jsp");
			return;
		}
		fileName = "G://defggg//" + fileName;
		File f = new File(fileName);
		if (f.exists() && f.isFile()) {
			SmartUpload su = new SmartUpload();
			su.initialize(config, request, response);
			su.setContentDisposition(null);
			try {
				su.downloadFile(fileName);
			} catch (SmartUploadException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}
		} else {
			response.sendRedirect("index.jsp");
			return;
		}
	}

}

参考：http://www.sitepoint.com/html5-file-drag-and-drop/