目前正在写测试平台，涉及到了文件上传的功能，在网上找到了一个比较炫的方式，就是用jQuery.filedrop实现拖动文件上传。
先看个做成后的演示图：
1.png
主要的使用方式就是将需要上传的文件拖动到上传区域，松手，就可以上传文件了。
下面是主要的实现代码：
<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML>
<html>
<head>
<title>功能测试页</title>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="js/jquery.filedrop.js"></script>
<script type="text/javascript" src="js/filedrop_script.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
</head>
<script type="text/javascript">
自己的函数实现，大家自己根据需求写吧
</script>
<body>
<div class="panel panel-warning" id="dropbox" style="margin:20px; min-height:200px;" >
<div class="panel-heading">
<h3 class="panel-title">上传测试用例</h3>
</div>
<div class="panel-body" style="text-align:center;">拖动测试用例文件到这里开始测试</div>
<div class="panel-body" style="text-align:center;" id="uploadFileNames"></div>
<div id="upload_loading_layout" class="layout" style="text-align:center;display: none;"><img src="images/loading.gif" /></div>
</div>
<button id="startTestBtn" type="button" class="btn btn-info" onClick="runTest('')" style="margin:20px;">开始测试</button>
<button id="clearFilesBtn" type="button" class="btn btn-danger" onClick="deleteUploadFiles('')">清空上传文件</button>
<div class="panel panel-info" id="resultbox" style="margin:20px;min-height:200px;" >
<div class="panel-heading">
<h3 class="panel-title">测试结果</h3>
</div>
<div id="result_layout" class="panel-body"></div>
<div id="run_loading_layout" class="layout" style="text-align:center;display: none;"><img src="images/loading.gif" /></div>
</div>
</body>
从上面的代码中可以看到我们用了一个自定义的文件名字是filedrop_script.js，这个就是具体的filedrop实现：
$(function(){
var dropbox = $('#dropbox');
dropbox.filedrop({
// The name of the $_FILES entry:
paramname:'pic',
// 最多传输文件的个数
maxfiles: 5,
// 最大传输文件的大小，单位是M
maxfilesize: 2,
// 文件上传对应的服务url
url: 'uploadFiles',
// 文件上传开始时的回调
uploadStarted:function(i, file, len) {
document.getElementById("upload_loading_layout").style.display = "block";
},
// 文件上传过程中的回调
progressUpdated: function(i, file, progress) {
document.getElementById("upload_loading_layout").style.display = "block";
//alert(progress);
},
// 文件上传结束时的回调
uploadFinished:function(i,file,response) {
document.getElementById("upload_loading_layout").style.display = "none";
},
error: function(err, file) {
switch(err) {
case 'BrowserNotSupported':
alert('Your browser does not support HTML5 file uploads!');
break;
case 'TooManyFiles':
alert('Too many files! Please select 5 at most! (configurable)');
break;
case 'FileTooLarge':
alert(file.name+' is too large! Please upload files up to 2mb (configurable).');
break;
case 'FileTypeNotAllowed':
alert('File type not allowed!');
break;
case 'FileExtensionNotAllowed':
alert('File extension not allowed!!');
break;
default:
break;
}
},
//allowedfileextensions: ['.jmx','.csv'],
//allowedfiletypes: ['image/jpeg','image/png','image/gif'],
// 文件上传前的回调
beforeEach: function(file) {
for(var item in fileName) {
if (fileName[item].indexOf(".jmx") != -1 && file.name.indexOf(".jmx") != -1) {
alert("您仅能上传一个JMX文件！")
return false;
}
if (fileName[item].indexOf(".csv") != -1 && file.name.indexOf(".csv") != -1) {
alert("您仅能上传一个CSV文件！")
return false;
}
}
}
});
只要完成了上面两步，再实现服务端的接收功能，就可以完成拖动上传的功能了。
网友评论