拖拽上传功能
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了拖拽上传功能相关的知识，希望对你有一定的参考价值。
拖拽上传功能旨在实现拖拽文件或者图片上传到你想要保存到的地方。此处上传的是xml文件，可以在里面对文件类型进行限制；
声明：现在的ie浏览器9及以下的版本并不支持该方法实现拖拽上传，如果有大神可以分享ie9及以下的拖拽上传方法将不胜感激；
代码：
<body>
<div id="div">
<h1 align="center">拖拽上传</h1>
<form id="form1" style="margin-left: 20px;" action="<%=path%>/examScore/scoreImport" method="post" enctype="multipart/form-data" onsubmit="return subSelect()">
<div id="datagrid1" style="z-index: 1;" class="formWrap">
<table id="table1" class="table1" border="0" cellspacing="1">
<tr>
<td>拖拽上传</td>
<td><input class="mini-hidden" name="planId" id="planId"/>
<input onfocus="getPlanList()" id="planName" name="planName" class="mini-textbox" required="true" width="96%"/><font color="red">*</font>
</td>
<td width="130px;"><input onclick="showAddPlan()" class="input-flat" type="button" value="新增"/></td>
</tr>
<tr>
<td>导入文件</td>
<td>
<input type="file" name="doc" id="doc" style="display:none" onchange="selectFile()"/>
<input type="button" id="btn" onclick="document.getElementById(‘doc‘).click()" value="浏览"/>
<input name ="filename" id="filename" value=""/>
<!-- <input type="file" name="upload" /> -->
</td>
<td width="130px;"></td>
</tr>
</table>
<div id="preview" class="preview" name="upload" ></div>
<div id="planList" style="display: none;z-index: 2;position: absolute;left:42%;height:80%;top:20%;">
<iframe src="<%=basePath %>examPlan/showPlanList" id="planFrame" frameborder="0"
style="width:120%;height:320px;border=0;overflow: scroll;"></iframe>
</div>
<div id="addPlan" style="display: none;z-index: 2;position: absolute;left:1px;top:1px;">
<iframe src="<%=basePath %>examPlan/showAddPlan" id="addPlanFrame" frameborder="0"
style="width:780px;height:440px;border=0;overflow: scroll;"></iframe>
</div>
<table class="table2" style="margin-top: 100px;">
<tr>
<td style="border: none; text-align: center;">
<input id="sub" class="input-flat" type="button" onclick="mySubmit();"
value="提交"/> <input
class="input-flat" type="button" onclick="onCancel()" value="取消"/>
</td>
</tr>
</table>
</div>
</form>
</div>
<script type="text/javascript">
var fileList="";
//1、文件上传html5 通过drag把文件拖拽到浏览器的默认事件覆盖
//文件离开
document.ondragleave=function(e){
e.preventDefault();
console.info("文件离开执行了我！！");
};
//鼠标松开文件
document.ondrop=function(e){ debugger
e.preventDefault();
console.info("松开以后执行了我！");
};
//鼠标移动文件
document.ondragover=function(e){
e.preventDefault();
console.info("文件移动以后执行了我！");
};
function tm_upload(){
var img1="";
var img2="";
var uploadArea=document.getElementById("div");
//2、通过HTML5拖拽事件，ondrop，然后通过拖动区域监听浏览器的drop事件达到文件上传的目的
uploadArea.addEventListener("drop", function(e){
e.preventDefault();
//3、从事件event中获取拖拽到浏览器的文件信息 ，如果没有文件个数的限制可以注释掉此段代码。
var fileNum= document.getElementById("preview").childNodes.length
if(fileNum>0){
alert("只能上传一个文件")
return false;
}
//此处是ie9及以下不支持的方法的地方；e.dataTransfer.files获取不到。
fileList=e.dataTransfer.files;
for(var i=0;i<fileList.length;i++){
//此处判断只能上传图片
if(fileList[i].name.indexOf(".xls")<0){
alert("请上传excle文件");
return;
}
//图片预览 这一步需要判断是什么浏览器 大家自己判断吧
/*************************************/
// img1=window.URL.createObjectURL(fileList[i]);
img1="../app/img/xlsIMG11.png";//我在此处给引入的 文件配置了一张文件类型的图标
img2="../app/img/deleteIMG11.png";
function deleteFile(){
document.getElementById("preview").innerHTML ="";
fileList=null;
}
/*************************************/
var str="<div><img src=‘"+img1+"‘/><p>"+fileList[i].name+"</p><button onclick=‘deleteFile()‘>删除</button></div>";
var str1=fileList[i].name;
document.getElementById("preview").innerHTML +=str;
// document.getElementById("preview").value=str1;
var fileName=fileList[i].name;
console.info(fileName);
var fileSize=fileList[i].size;
console.info(fileSize);
document.getElementById("filename").value=fileName;
//4、通过XMLHttpRequest上传文件到服务器 就是一个ajax请求
}
});
}
//直接调用
tm_upload();
function deleteFile(){
document.getElementById("preview").innerHTML ="";
document.getElementById("filename").value="";
}
function subSelect(){ debugger
if( document.getElementById("filename").value==""){
fileList.length=0
alert("选择文件不能为空")
return false;
}
var FileIsNull = document.getElementById("doc").value;
var length =fileList.length;
if(FileIsNull==null||FileIsNull==""){
for(var j=0 ; j<length;j++){
//此处判断只能上传图片
if(fileList[j].name.indexOf(".xls")<0){
alert("请上传.xls文件");
return;
}
//图片预览 这一步需要判断是什么浏览器 大家自己判断吧
/*************************************/
//img1=window.URL.createObjectURL(fileList[i]);
/*************************************/
//var str="<div><img src=‘"+img1+"‘/><p>"+fileList[j].name+"</p></div>";
//var str1=fileList[j].name;
// document.getElementById("preview").innerHTML +=str;
// document.getElementById("preview").value=str1;
var fileName=fileList[j].name;
console.info(fileName);
var fileSize=fileList[j].size;
console.info(fileSize);
//4、通过XMLHttpRequest上传文件到服务器 就是一个ajax请求
var xhr=new XMLHttpRequest();
//5、这里需要先写好一个importExcel.jsp的上传文件，当然，你写成servlet或者是action都可以
xhr.open("post","<%=path%>/examScore/scoreImport",true);
xhr.setRequestHeader("X-Request-Width", "XMLHttpRequest");
//6、通过HTML5 FormData动态设置表单元素
var formData=new FormData();//动态给表单赋值，传递二进制文件
//其实就相当于<input type="file" name="file"/>
formData.append("upload",fileList[j]);
xhr.send(formData);
return false;
}
}else{
return true;
}
};
mini.parse();
/* var file=$(":file").val();
if(""==file){
alert("文件不能为空");
return false;
} */
/* var pos = file.lastIndexOf(‘.xls‘);
var pos1=file.lastIndexOf(‘.xlsx‘);
if(pos==-1&&pos1==-1){
alert("文件类型不匹配");
return false;
}
if(pos + 4 != file.length&&pos1+5!=file.length){
alert("文件类型不匹配");
return false;
} */
//3、从事件event中获取拖拽到浏览器的文件信息
/* var fileNum= document.getElementById("preview").childNodes.length
if(fileNum>0){
alert("只能上传一个文件")
return false;
} */
function showAddPlan(){
$("#table1").hide();
$("#addPlan").show();
}
function getPlanList(){
var planSort=‘<%=planSort%>‘;
var url="<%=path %>/examPlan/showPlanList?planSort=<%=planSort%>";
mini.open({
url: url,
title: "计划名称列表", width: 800, height: 450,
ondestroy: function (action) {
}
});
}
function onCancel() {
window.CloseOwnerWindow("ok");
}
</script>
<script type="text/javascript">
mini.parse();
function beforeSubmit(){
var file=$(":file").val();
if(""==file){
alert("文件不能为空");
return false;
}
var pos = file.lastIndexOf(‘.xls‘);
var pos1=file.lastIndexOf(‘.xlsx‘);
if(pos==-1&&pos1==-1){
alert("文件类型不匹配");
return false;
}
if(pos + 4 != file.length&&pos1+5!=file.length){
alert("文件类型不匹配");
return false;
}
}
function onCancel() {
window.CloseOwnerWindow("ok");
}
function mySubmit(){
$("#form1").submit();
window.CloseOwnerWindow("ok");
}
</script>
</body>
后台你们自己写吧，你们用什么框架我有不知道，只要接收一下这里传过去的xml文件就行了，我用的spring_mvc框架所以在后台接收是这样的
注意：标注部分是框架接收文件类型的必备注解，
public void scoreImport(@RequestParam("upload") MultipartFile mFile, Model model, HttpServletRequest request,
HttpServletResponse response) {
response.setCharacterEncoding("UTF-8");
response.setContentType("text/html");
StaticEntity.setPagestatus(3);// 3代表jsp页面可关闭
InputStream is = excelUtil.processFileUpload(mFile, request);
Map map = new HashMap();
map = readScoreExcelData(is, map);
try {
if (map.get("content") != "") {
StaticEntity.setPagestatus(2);
} else {
List lists = (List) map.get("lists");
String planId=map.get("planId").toString();
String status=scoreService.getPlanStatus(planId);
if(status==null||status==""){
StaticEntity.setPagestatus(4);//计划不存在
}else if("1".equals(status)){
StaticEntity.setPagestatus(5);//计划已发布成绩
}else{
request.setAttribute("planId", planId);
scoreService.insertScoreData(lists, request);// 县
StaticEntity.setPagestatus(1);
}
}
} catch (Exception e) {
e.printStackTrace();
}
}
以上是关于拖拽上传功能的主要内容，如果未能解决你的问题，请参考以下文章