文件上传前检测客户端文件大小的三种方法

前段时间，因工作需要，需要在文件上传时限制文件的大小，所以需要在上传之前检测文件的大小。

方法一：js检测文件大小

一开始的想法是通过js直接在前端检测文件大小，代码如下：

//获取上传文件大小
function getFileSize(filePath)
{
    var vBrowserVersion = getBrowserVersion();
    if("MSIE6.0" == vBrowserVersion){//对于IE6，使用Image的fileSize属性进行判断文件大小
           var image=new Image();
           image.dynsrc=filePath;
          return image.fileSize;
    }else if(vBrowserVersion.indexOf("MSIE")>=0){//对于IE6以上浏览器(IE6是公司默认最低版本)，使用ActiveXObject进行上传
        var fso = new ActiveXObject("Scripting.FileSystemObject");
        return fso.GetFile(filePath).size;
    }else{//其它的浏览器,也是采用Image的fileSize属性进行判断文件大小
           var image=new Image();
           image.dynsrc = filePath;
          return image.fileSize;
    }
}

但这种方法存在一些弊端：

1、IE6下面是利用的Image标签的dynsrc属性去判断；

2、IE8下面使用ActiveXObject进行上传的话，是IE安全机制不支持的，需要降低本地浏览器的安全设置，对于开发者来说，是不可能去限制用户的。

故这种方法不可行。

方法二：java读取文件流方式

接着的一种做法是通过dwr的方式，将文件路径传到后台去，再去读取文件的大小。代码如下：

/**
     * 读取单据所带的附件总大小
     * 
     * @param filaPath 准备上传的文件的路径
     * @param moduleKey 文件对象类型
     * @param moduleObjectId 文件对象ID
     * @return lAttachmentTotalSize 该单据的附件总大小
     * @throws AttachmentException
     */
    public static long getAttachmentTotalSize(String filePath, String moduleKey, String moduleObjectId)
        throws AttachmentException {
        // 附件总大小
        long lAttachmentTotalSize = 0;
        // 准备上传的文件大小
        long lAttachmentSize = 0;
        // 已经保存的附件的大小
        long lExistAttachmentSize = 0;
        FileInputStream fis = null;
        // 根据对象类型和对象ID查询出已经保存的附件
        List lstAttachment = queryAttachmentList(moduleKey, moduleObjectId);
        if (null != lstAttachment && lstAttachment.size() > 0) {
            for (int i = 0, iSize = lstAttachment.size(); i < iSize; i++) {
                AttachmentVO vo = (AttachmentVO) lstAttachment.get(i);
                // 读取附件的大小，并累加
                lExistAttachmentSize += vo.getFileSize();
            }
        }
        // 根据filePath读取准备上传的文件大小，与已经保存的文件大小相加
        try {
            File ff = new File(filePath);
            if (ff.exists()) {
                fis = new FileInputStream(ff);
                lAttachmentSize = fis.available();
            } else {
                logger.error("AttachmentUtil.getAttachmentTotalSize方法，获取准备上传的文件时，文件不存在");
            }
        } catch (IOException ex) {
            logger.error("AttachmentUtil.getAttachmentTotalSize方法，读取文件大小时发生异常", ex);
        } finally {
            // 关闭流
            try {
                if (null != fis) {
                    fis.close();
                }
            } catch (IOException ex) {
                logger.error("关闭流时发生异常", ex);
            }
        }
        // 附件总大小=已经存在的附件大小+准备上传的附件大小
        lAttachmentTotalSize = lExistAttachmentSize + lAttachmentSize;
        return lAttachmentTotalSize;
    }

这个方法也存在一些弊端：

1、服务器端在读取文件路径时，是访问不了客户端的文件的，它只会放在服务器端自己对应路径下的文件，但往往这个路径下是不存在对应文件的，故读取出来的文件大小总为0；

2、IE8下由于安全问题，服务端获取客户端文件的路径，会变为C：/fakePath问题，这个问题在下一篇文章中会有解决方案；

方法三：Ajax异步提交表单获取文件大小

最后采取的一种方法是，通过Ajax进行异步的表单提交，因为form里面使用了file标签，是可以拿到文件的大小的。代码如下：

//定义ajax异步提交form时需要的参数
                    var options = {
                        url:'<common:webRoot/>/product/attachment/attachmentMultiAction.do?queryType=getAttachmentTotalSize',
                        success:successReturn,
                        type:'post'
                    };
                    //ajax异步提交form
                    jQuery("#attachmentForm").ajaxSubmit(options);



//ajax返回后回调方法
        function successReturn(data){
            //后台返回的消息固定为FileTooLarge
            if("FileTooLarge" == data){
                var vMessage = "您添加的附件文件总大小超过(<%=AttachmentInfo.ATTACHMENT_SIZE/1024/1024%>M)，请压缩文件或者重新选择。";
                alert(vMessage);
            }else{//返回消息为空时，则正常提交form，上传文件
                document.attachmentForm.target = "_self";
                document.attachmentForm.action = "<common:webRoot/>/product/attachment/attachmentMultiAction.do";
                document.attachmentForm.submit();
                window.loadingImg.style.visibility = "visible";
            }
        }

其中successReturn是返回后调用的方法，如果文件过大则进行提示，否则重新提交，进行上传。

关于Ajax异步提交表单的详细介绍，会在下一篇文章中介绍。

这种方法的好处是不受客户端和服务器端的安全性影响，不好的地方是会先进行一个异步提交，需要消耗一定资源，当然因为是异步的，只要不是上传特别大的附件而导致检测过程过长，页面端的响应效果还是没什么太大的影响。