java html5 上传_Java实现HTML5拖拽文件上传

这是主页面

String basePath= request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%>

HTML5文件拖动上传

width:600px; height:100px; border: 1px solid;

text-align: center; line-height: 100px; color: #72FD31;

}

.ne {

width:600px; height:400px; border: 1px solid;

margin-top:20px

}

将文件拖拽到此处上传

//1:文件上传html5

//知识点：drag 把文件拖拽到浏览器的默认行为是下载或打开

document.ondragleave = function(e) {

e.preventDefault();//拖动元素离开的事件

};

document.οndrοp= function(e) {

e.preventDefault();//文件拖放松开以后的事件

};

document.οndragοver= function(e) {

e.preventDefault();

};functiontm_upload() {//2:通过html5拖拽事件，ondrop,然后通过拖动区域监听浏览器的drop事件达到文件上传的目的

var uploadArea = document.getElementById("upflies");//监听文件上传区域的文件松开事件

uploadArea.addEventListener("drop", function(e) {

e.preventDefault();//3:从事件event中获取拖拽到浏览器的文件信息

//获取事件的文件列表信息

var fileList =e.dataTransfer.files;var length =fileList.length;for(var i=0;i

//获得图片流

var img = window.webkitURL.createObjectURL(fileList[i]); //火狐不支持！

//获取文件名称

var fileName =fileList[i].name;//获取文件的大小

var fileSize =fileList[i].size;var str = "

文件名称："+fileName+"

大小："+fileSize+"

"document.getElementById("content1").innerHTML +=str;//4:通过XMLHttpRequest上传文件到服务器

var xhr = newXMLHttpRequest();

xhr.open("post", "data.jsp",true); //代表异步提交，false表示非异步

//判断是不是一个ajax

xhr.setRequestHeader("X-Requested-with", "XMLHttpRequest");//5:通过HTML5 FormData动态设置表单元素

var formdata = new FormData(); //动态给表单赋值，传递二进制文件

//6:获取服务器上的文件信息

formdata.append("doc",fileList[i]);//7:编写data.jsp上传页面

xhr.send(formdata);

}

});

}

tm_upload();

- - -- - -- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -- - - - -- - -- - - - - - - - - -

data.jsp这里是处理页面