jQuery.filedrop图片拖动上传文件的学习笔记

目前正在写测试平台，涉及到了文件上传的功能，在网上找到了一个比较炫的方式，就是用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;
                }
            }
        }
    });

只要完成了上面两步，再实现服务端的接收功能，就可以完成拖动上传的功能了。

jQuery.filedrop图片拖动上传文件的学习笔记

推荐阅读更多精彩内容