html5 实现客户端验证上传文件的大小

2019-09-08 郑州网站建设  

在HTML 5中,现在可以在客户端进行文件上传时的校验了,比如用户选择文件后,可以 马上校验文件的大小和属性等。本新闻向码农介绍html5 怎么实现客户端验证上传文件的大小,感兴趣的码农可以参考一下。

在HTML 5中,现在可以在客户端进行文件上传时的校验了,比如用户选择文件后,可以马上校验文件的大小和属性等,这其实时得益于浏览器端新增的对文件的校验能力,其中支持HTML 5的浏览器,都会实现W3C实现的文件API标准,其中可以读取客户端文件的各种信息和参数。

下面的例子如下,首先是HTML

XML/HTML Code复制内容到剪贴板

<input type="file" data-file_type="zip|png" data-max_size="1000000">    

  

这里data-file_type属性中,指定了文件的类型,接受ZIP,PNG文件,用|分隔开来,其中data-max-size指定文件的大小,这里是1MB。然后使用jquery 进行判断

JavaScript Code复制内容到剪贴板

$('input[type=file]').each(function()      

{      

    if(typeof $(this).attr('data-file_type') == 'string')      

    {      

        var file_types = $(this).attr('data-file_type').split('|');      

    }      

             

    var mimes = get_mimes(file_types);      

       

         //文件要求的指定大小      

    var max_size = parseInt($(this).attr('data-max_size'));      

       

    $(this).change(function(evt)      

    {      

        var finput = $(this);      

       

        var files = evt.target.files; // 获得文件对象      

       

                var output = [];      

       

        for (var i = 0, f; f = files[i]; i++)      

        {      

            //检查文件的类型是否符合指定要求      

            if(jQuery.inArray(f.type , mimes) == -1)      

            {      

                alert('File type '+ f.type + ' not allowed');      

                $(this).val('');      

                continue;      

            }      

       

            //检查文件大小      

            else if(f.size > max_size)      

            {      


河南郑州做网站首选天择文化,我们专注郑州网站建设网站设计网站制作与开发,是中原地区专业的郑州网络公司,多年来我们一直努力,服务客户数百家,欢迎您的咨询。
本文链接:郑州网络公司http://tzchb.ieyo.com/dede/1363.html转载请标明出处,谢谢合作!
标签:
  • HTML5
  • HTML
  • 可以
  • 现在
  • 5
  • 客户