先上代码，写的jsp页面，后台是tomcat服务器，所以页面里有一些java的代码，如果后台用其他语言可以无视：
复制代码 代码如下:
<%@ page language=”java” contenttype=”text/html; chart=utf-8″
pageencoding=”utf-8″%>
<%@page import=”java.io.*”%>
<!doctype html public “-//w3c//dtd html 4.01 transitional//en” “/d/file/titlepic/loo.dtd& />
<html>
<head>
<meta http-equiv=”content-type” content=”text/html; chart=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;高中64篇
border-radius: 7px;
cursor: default;
}
#filedrag.hover {
color: #f00;
border-color: #f00;
border-style: solid;
box-shadow: int 0 3px 4px #888;
}
</style>
印象大红袍
</head>
<body>
<form id=”upload” action=”uploadrvlet” enctype=”multipart/form-data”
method=”post” onsubmit=”return upload();”>
<p>
<label for=”filelect”>file name:</label><input multiple=”true”
type=”file” id=”filelect” name=”filelect[]” />
<div id=”filedra宣传材料g”>或者将文件拖拽到这里</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=’downloadrvlet?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 lection
function filelecthandler(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++) {
parfile(f);
upfiles.push(f);
}
}
// output file information
function parfile(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”, “uploadrvlet”, true);
var formdata = new formdata();
for ( var i = 0, f; f = upfiles[i]; i++) {
formdata.append(‘myfile’, f);
}
xhr.nd(formdata);
xhr.onreadystatechange=function(e){
history.go(0); //由于这个页面还要显示可以下载的文件，所以需要刷新下页面
}
return fal;
}
}
// initialize
function init() {
var filelect = $id(“filelect”), filedrag = $id(“filedrag”), submitbutton = $id(“submitbutton”);
// file lect
filelect.addeventlistener(“change”, filelecthandler, fal);
// is xhr2 available?
var xhr = new xmlhttprequest();
if (xhr.upload) {
// file drop
filedrag.addeventlistener(“dragover”, filedraghover, fal);
filedrag.addeventlistener(“dragleave”, filedraghover, fal);
filedrag.addeventlistener(“drop”, filelecthandler, fal);
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>
附上后台处理上传下载的rvlet，用了smartupload，不能很好的解决中文问题：
复制代码 代码如下:
package com.hit.software;
import java.io.ioexception;
import javax.rvlet.rvletconfig;
import javax.rvlet.s免费视频ervletexception;
import javax.rvlet.annotation.webrvlet;
import javax.rvlet.http.httprvlet;
import javax.rvlet.http.httprvletrequest;
import javax.rvlet.http.httprvletrespon;
import com.jspsmart.upload.files;
import com.jspsmart.upload.smartupload;
/**
* rvlet implementation class uploadrvlet
*/
@webrvlet(“/uploadrvlet”)
public class uploadrvlet extends httprvlet {
private static final long rialversionuid = 1l;
private rvletconfig config;
final public void init(rvletconfig config) throws rvletexception {
this.config = config;
}
/**
* @e httprvlet#httprvlet()
*/
public uploadrvlet() {
super();
// todo auto-generated constructor stub
}
/**
* @e httprvlet#doget(httprvletrequest request, httprvletrespon
* respon)
*/
protected void doget(httprvletrequest request,
httprvletrespon respon) throws rvletexception, ioexception {
dopost(request, respon);
}
/**
* @e httprvlet#dopost(httprvletrequest request, httprvletrespon
* respon)
*/
protected void dopost(httprvletrequest request,
httprvletrespon respon) throws rvletexception, ioexception {
request.tcharacterencoding(“utf-8”);
// string s = request.getparameter(“pic”);
// system.out.println(s);
smartupload mysmartupload = new smartupload();
try {
mysmartupload.initialize(config, request, respon);
mysmartupload.tmaxfilesize(150 * 1024 * 1024);
mysmartupload.ttotalmaxfilesize(150 * 1024 * 1024);
// mysmartupload.tallowedfileslist(“doc,txt,rar,pdf,png”);
mysmartupload.tdeniedfileslist(“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());
}
respon.ndredirect(“index.jsp”);
}
}
复制代码 代码如下:
package com.hit.software;
import java.io.file;
import java.io.ioexception;
import javax.rvlet.rvletconfig;
import javax.rvlet.rvletexception;
import javax.rvlet.annotation.webrvlet;
import javax.rvlet.http.httprvlet;
import javax.rvlet.http.httprvletrequest;
import javax.rvlet.http.httprvletrespon;
import javax.rvlet.jsp.jspfactory;
import javax.rvlet.jsp.jspwriter;
import javax.rvlet.jsp.pagecontext;
import com.jspsmart.upload.smartupload;
import com.jspsmart.upload.smartuploadexception;
/**
* rvlet implementation class downloadrvlet
*/
@webrvlet(“/downloadrvlet”)
public class downloadrvlet extends httprvlet {
private static final long rialversionuid = 1l;
private rvletconfig config;
/**
* @e httprvlet#httprvlet()
*/
public downloadrvlet() {
super();
// todo auto-generated constructor stub
}
final public void init(rvletconfig config) throws rvletexception {
this.config = config;
}
/**
* @e httprvlet#doget(httprvletrequest request, httprvletrespon
* respon)
*/
protected void doget(httprvletrequest request,
httprvletrespon respon) throws rvletexception, ioexception {
dopost(request, respon);
}
/**
* @e httprvlet#dopost(httprvletrequest request, httprvletrespon
* respon)
*/
protected void dopost(httprvletrequest request,
httprvletrespon respon) throws rvletexception, ioexception {
request.tcharacterencoding(“utf-8”);
string filename = request.getparameter(“filename”);
system.out.println(“down :”+filename);
if (filename == null) {
respon.ndredirect(“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, respon);
su.tcontentdisposition(null);
try {
su.downloadfile(filename);
} catch (smartuploadexception e) {
/海贼王艾斯图片/ todo auto-generated catch block
e.printstacktrace();
}
} el {
respon.ndredirect(“index.jsp”);
return;
}
}
}
本文发布于:2023-04-06 17:34:53，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/c9327a66b71784624fe27faa0f3ed723.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：HTML5拖拽文件到浏览器并实现文件上传下载功能代码.doc
本文 PDF 下载地址：HTML5拖拽文件到浏览器并实现文件上传下载功能代码.pdf
| 留言与评论（共有 0 条评论） |
