html5 实现客户端验证上传文件的大小(简单实例)

2019-01-28 14:53:32于海丽

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

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

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

XML/HTML Code复制内容到剪贴板
  1. <input type="file" data-file_type="zip|png" data-max_size="1000000">       

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

JavaScript Code复制内容到剪贴板
  1. $('input[type=file]').each(function()       {      
  2.     if(typeof $(this).attr('data-file_type') == 'string')           {      
  3.         var file_types = $(this).attr('data-file_type').split('|');           }      
  4.                   var mimes = get_mimes(file_types);      
  5.                  //文件要求的指定大小      
  6.     var max_size = parseInt($(this).attr('data-max_size'));              
  7.     $(this).change(function(evt)           {      
  8.         var finput = $(this);              
  9.         var files = evt.target.files; // 获得文件对象              
  10.                 var output = [];