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

目前正在写测试平台，涉及到了文件上传的功能，在网上找到了一个比较炫的方式，就是用jQuery.filedrop实现拖动文件上传。

先看个做成后的演示图：

1.png

主要的使用方式就是将需要上传的文件拖动到上传区域，松手，就可以上传文件了。

下面是主要的实现代码：

<%@ page language="java" pageEncoding="UTF-8"%>














    

        

            
上传测试用例
        
        
拖动测试用例文件到这里开始测试
        

        

    
    开始测试
    清空上传文件
    

        

            
测试结果
        
        

        

    

从上面的代码中可以看到我们用了一个自定义的文件名字是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;
                }
            }
        }
    });

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