一、beforeupload概述

beforeupload 是一个非常重要的事件，它在文件上传之前触发，开发人员可以在此事件中通过 JavaScript 处理上传文件的相关内容并进行一些操作。这个事件通常被用于检查文件是否符合上传要求、判断上传文件的大小、格式以及类型等。

二、beforeupload的基本用法

beforeupload 事件的使用非常简单，只需要在 input 元素中加上 onbeforeupload 属性即可。下面是一个基本的 beforeupload 事件的实例：

<input type='file' name='pic' onbeforeupload='return myFunction()'></input>
<script>
    function myFunction() {
        alert("Before upload");
        return true;
    }
</script>

例如上述代码，当用户点击上传按钮时，就会先弹出一个警告框提示“Before upload”，然后再执行上传操作。这个实例非常基础，但也是比较典型的 beforeupload 使用方式。

三、beforeupload检查文件大小

在实际开发中，通常需要检查上传文件的大小是否超过了设定的限制。下面是一个简单的文件大小检查的实现：

<input type='file' name='pic' onbeforeupload='return checkSize()'></input>
<script>
    function checkSize() {
        var fileSize = document.getElementsByName('pic')[0].files[0].size;
        if(fileSize > 1024*1024){
            alert("文件大小不能超过1MB");
            return false;
        }
        return true;
    }
</script>

上述代码中，我们检查了文件大小是否超过了 1MB，如果超过了则弹出一个警告框提示用户文件大小不能超过 1MB 并返回 false，否则返回 true。

四、beforeupload检查文件类型

有时候为了安全考虑，需要限制上传文件的类型，下面是一个简单的文件类型检查的实现：

<input type='file' id='pic' name='pic' onbeforeupload='return checkType()'></input>
<script>
    function checkType() {
        var type = document.getElementById('pic').value.split('.').pop().toLowerCase();
        if(type!='jpg' && type!='jpeg' && type!='bmp' && type!='gif' && type!='png'){
            alert('只能上传图片文件');
            return false;
        }
        return true;
    }
</script>

上述代码中，我们检查了文件类型是否为图片类型（jpg,jpeg,bmp,gif,png）中的一种，如果不是则弹出警告框提示用户只能上传图片文件并返回 false，否则返回 true。

五、beforeupload禁止上传

在某些情况下，有时候需要禁止用户上传，并提示对应的信息。下面是一个禁止上传的实现：

<input type='file' name='pic' onbeforeupload='return false;'></input>
<script>
    document.getElementsByName('pic')[0].onchange = function() {
        alert("禁止上传");
    };
</script>

例如上述代码，当用户选择文件后就会弹出一个警告框提示“禁止上传”，然后不会有任何操作，上传被禁止。

六、beforeupload与ajax异步上传

在实际开发中，通常使用 ajax 异步上传文件，下面是一个使用 jquery 的 AJAX 异步上传文件的实现：

<input id='file' type='file' name='file' onchange='upload()' />
<script>
    function upload() {
        var formData = new FormData();
        formData.append('file', $('#file')[0].files[0]);
        $.ajax({
            url: 'upload.php',
            type: 'post',
            data: formData,
            processData: false,
            contentType: false,
            beforeSend: function() {
                return checkFile();
            },
            success: function(response) {
                alert(response);
            }
        });
    }
    function checkFile() {
        var fileSize = $('#file')[0].files[0].size;
        if(fileSize > 1024*1024){
            alert("只能上传小于1MB的文件");
            return false;
        }
        var type = $('#file').val().split('.').pop().toLowerCase();
        if(type!='jpg' && type!='jpeg' && type!='bmp' && type!='gif' && type!='png'){
            alert('只能上传图片文件');
            return false;
        }
        return true;
    }
</script>

上述代码中，我们通过 jquery 中 ajax 的 beforeSend 属性来调用 checkFile() 函数，这个函数用于检查上传的文件是否符合要求。如果不符合要求，则弹出警告框提示用户并返回 false，否则返回 true 并上传文件。上传文件使用了 jquery 中的 FormData 对象，用于封装上传的文件。

七、beforeupload防止重复上传

在实际开发中，有时候需要防止用户重复上传同一个文件，下面是一个防止重复上传同一个文件的实现：

<input type="file" id="file" name="file" onbeforeupload="return checkFile()" />
<script>
    var lastModifiedTime = 0;
    function checkFile() {
        var files = $('#file')[0].files;
        if(files.length>0 && files[0].lastModified <= lastModifiedTime) {
            alert('文件已经上传，请勿重复上传！');
            return false;
        }
        lastModifiedTime = files[0].lastModified;
        return true;
    }
</script>

例如上述代码，我们记录了上传文件的 lastModified 时间戳，用于比较是否与之前已经上传的文件时间戳相同，如果相同则弹出“文件已经上传，请勿重复上传！”的警告框并返回 false，否则返回 true 并进行上传操作。

总结

beforeupload 事件在文件上传中发挥着重要的作用，通过对文件的检查、上传前的一些操作等，可以帮助我们更好地掌控上传过程。在实际开发中，我们需要结合具体需求和业务进行组合使用，以达到最好的效果。

beforeupload的用法及实例