zoukankan      html  css  js  c++  java
  • js上传限制文件大小

    在上传文件过程中需要限制文件的大小,我们可以通过file对象的size属性来判断;

    思路很简单,麻烦的地方可能是文件大小的计算;

    我们需要做的是在共用函数中定义这样的方法:

    /* 限制文件大小,返回 boolean
             * file:文件对象
             * limiteSize:限制大小---例如:"50MB"
             * */
            limitFileSize: function (file, limitSize) {
                var arr = ["KB", "MB", "GB"]
                var limit = limitSize.toUpperCase();
                var limitNum = 0;
                for (var i = 0; i < arr.length; i++) {
                    var leval = limit.indexOf(arr[i]);
                    if (leval > -1) {
                        limitNum = parseInt(limit.substr(0, leval)) * Math.pow(1024, (i + 1))
                        break
                    }
                }
                if (file.size > limitNum) {
                    return false
                }
                return true
            },

    然后在需要上传之前调用对file对象校验即可

    tools.limitFileSize(file,'50MB')

    关于file对象的获取:

      如果使用自定义的input标签,在dom元素的files属性中获取;

      如果使用第三方的上传组件,一般在上传前的钩子函数的参数中;

      如果需要告诉用户此次上传文件的大小,你可以定义这样的函数,相当于上诉函数的逆运算:

            /*
            * 格式化文件大小显示
            * value : file文件的大小值
            * */
            formateSize:function(value){
                if (null == value || value == '') {
                    return "0 Bytes";
                }
                var unitArr = new Array("Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB");
                var index = 0;
                var srcsize = parseFloat(value);
                index = Math.floor(Math.log(srcsize) / Math.log(1024));
                var size = srcsize / Math.pow(1024, index);
                size = size.toFixed(2);//保留的小数位数
                return size + unitArr[index];
            },
  • 相关阅读:
    Vim内直接使用p粘贴系统剪切板
    购买主机时的常见宽带类型或运营商
    Bilibli文章无法复制文字
    Python_tkinter(1)_窗口创建与布局
    模拟器中安装APK报Error:INSTALL_FAILED_NO_MATCHING_ABIS
    Fiddler_内置命令行_03
    【摘】Fiddler工具使用介绍
    get和post区别
    jmeter_上一请求的响应值作为下一请求的参数
    jmeter_用户并发登录
  • 原文地址:https://www.cnblogs.com/wuhaozhou/p/6929774.html
Copyright © 2011-2022 走看看