目前正在寫測試平臺，涉及到了文件上傳的功能，在網(wǎng)上找到了一個比較炫的方式，就是用jQuery.filedrop實現(xiàn)拖動文件上傳。
先看個做成后的演示圖：
1.png
主要的使用方式就是將需要上傳的文件拖動到上傳區(qū)域，松手，就可以上傳文件了。
下面是主要的實現(xiàn)代碼：
<%@ 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">
自己的函數(shù)實現(xiàn)，大家自己根據(jù)需求寫吧
</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">測試結(jié)果</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實現(xiàn)：
$(function(){
var dropbox = $('#dropbox');
dropbox.filedrop({
// The name of the $_FILES entry:
paramname:'pic',
// 最多傳輸文件的個數(shù)
maxfiles: 5,
// 最大傳輸文件的大小，單位是M
maxfilesize: 2,
// 文件上傳對應的服務url
url: 'uploadFiles',
// 文件上傳開始時的回調(diào)
uploadStarted:function(i, file, len) {
document.getElementById("upload_loading_layout").style.display = "block";
},
// 文件上傳過程中的回調(diào)
progressUpdated: function(i, file, progress) {
document.getElementById("upload_loading_layout").style.display = "block";
//alert(progress);
},
// 文件上傳結(jié)束時的回調(diào)
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'],
// 文件上傳前的回調(diào)
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;
}
}
}
});
只要完成了上面兩步，再實現(xiàn)服務端的接收功能，就可以完成拖動上傳的功能了。
