这是主页面
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+"
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 这里是处理页面