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

2020-04-21 07:19:33易采站长站整理

// 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()