blueImp/jQuery file upload 的正確用法（限制上傳大小和文件類型）

這個插件太出名了，幾乎能完成所有能想象的到的效果，包括進度條、拖拽、甚至現在已經完美支持圖片視頻等的處理，三個字形容就是屌爆了。最近在做上傳這一部分，發現網上對於上傳文件大小的限制和類型檢測等的方法都不妥當，包括老外寫的。blueimp提供了完整的解決方案，驗證當然是有的，所以對於一個普通的上傳組件來說需要下面三個組件：

<script src="//cdn.bootcss.com/blueimp-file-upload/9.12.5/js/jquery.fileupload.js"></script>
 <script src="//cdn.bootcss.com/blueimp-file-upload/9.12.5/js/jquery.fileupload-process.js"></script>
 <script src="//cdn.bootcss.com/blueimp-file-upload/9.12.5/js/jquery.fileupload-validate.js"></script>

大部分文章都沒有包含process和validate這兩個組件，前者負責處理上傳過程中各個事件的管理，validate則是對驗證的支持，如果不包含這兩個組件，那么只能像下面這樣來做一些驗證：

add: function (e, data) {
        var uploadErrors = [];

        var acceptFileTypes = /\/(pdf|xml)$/i;
        if(data.originalFiles[0]['type'].length && !acceptFileTypes.test(data.originalFiles[0]['type'])) {
            uploadErrors.push('Tipo de Archivo no Aceptado');
        }

        console.log(data.originalFiles[0]['size']) ;
        if (data.originalFiles[0]['size'] > 5000000) {
            uploadErrors.push('Tamaño de Archivo demasiado Grande');
        }
        if(uploadErrors.length > 0) {
            alert(uploadErrors.join("\n"));
        } else {
            data.context = $('<p/>').text('Subiendo...').appendTo(document.body);
            data.submit();
        }

    }

那么用官方的方式可以如下

<pre>acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
maxFileSize: 99 * 1024 * 1024,
minFileSize: 5,
maxNumberOfFiles: 50,
messages: {
    maxFileSize: 'File exceeds maximum allowed size of 99MB',
    acceptFileTypes: 'File type not allowed'
},processfail: function (e, data) {
    var currentFile = data.files[data.index];
    if (data.files.error && currentFile.error) {
        // there was an error, do something about it
        console.log(currentFile.error);
    }
}</pre>

明顯簡潔很多。