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

当前位置：首页 > 范文|应用文 > IT技术专栏 > 网页制作

来源：阅读：2139 次日期：2016-07-13 14:45:39

温馨提示：小编为您整理了“HTML5拖拽文件到浏览器并实现文件上传下载功能代码”,方便广大网友查阅！

使用HTML5拖拽文件到浏览器并实现文件上传下载，html5的功能是越来越强大了，下面与大家分享下具体的实现代码，感兴趣的朋友可以参考下

先上代码，写的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>

#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" onsubmit="return upLoad();">

<p>

<label for="fileselect">file name:</label><input multiple="true"

type="file" id="fileselect" name="fileselect[]" />

<div id="filedrag">或者将文件拖拽到这里</div>

</div>

</form>

</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/>");

}

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;

}

上一篇：HTML5中如何显示视频呢 HTML5视频播放demo

下一篇：将HTML5 Canvas的内容保存为图片借助toDataURL实现

手机网站地址：HTML5拖拽文件到浏览器并实现文件上传下载功能代码

由于各方面情况的不断调整与变化，提供的所有考试信息和咨询回复仅供参考，敬请考生以权威部门公布的正式信息和咨询为准！