脚本之家 服务器常用软件
快捷导航
您的位置：主页 > 网页制作 > html5 >

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

  发布时间：2016-05-15 11:08:38   作者：佚名   我要评论
下面小编就为大家带来一篇html5 实现客户端验证上传文件的大小(简单实例)。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

在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">    
  2.   

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

JavaScript Code复制内容到剪贴板
  1. $('input[type=file]').each(function()      
  2. {      
  3.     if(typeof $(this).attr('data-file_type') == 'string')      
  4.     {      
  5.         var file_types = $(this).attr('data-file_type').split('|');      
  6.     }      
  7.              
  8.     var mimes = get_mimes(file_types);      
  9.        
  10.          //文件要求的指定大小      
  11.     var max_size = parseInt($(this).attr('data-max_size'));      
  12.        
  13.     $(this).change(function(evt)      
  14.     {      
  15.         var finput = $(this);      
  16.        
  17.         var files = evt.target.files; // 获得文件对象      
  18.        
  19.                 var output = [];      
  20.        
  21.         for (var i = 0, f; f = files[i]; i++)      
  22.         {      
  23.             //检查文件的类型是否符合指定要求      
  24.             if(jQuery.inArray(f.type , mimes) == -1)      
  25.             {      
  26.                 alert('File type '+ f.type + ' not allowed');      
  27.                 $(this).val('');      
  28.                 continue;      
  29.             }      
  30.        
  31.             //检查文件大小      
  32.             else if(f.size > max_size)      
  33.             {      
  34.                 alert('Maximum file size is ' + max_size + ' bytes.');      
  35.                 $(this).val('');      
  36.             }      
  37.        
  38.             //Validation ok      
  39.             else     
  40.             {      
  41.                 output.push('[b]', f.name, '[/b] (', f.type || 'n/a', ') - ', f.size, ' bytes, last modified: ', f.lastModifiedDate.toLocaleDateString() );      
  42.             }      
  43.         }      
  44.        
  45.         finput.after('<div>' + output.join('') + '</div>');      
  46.     });      
  47. });  

在上面的代码中， var mimes = get_mimes(file_types); 其实是一个方法，如下： 

JavaScript Code复制内容到剪贴板
  1. /*    
  2.     Get the mimes of a list of extensions as an array    
  3. */     
  4. function get_mimes(extensions)      
  5. {      
  6.     var mimes = [];      
  7.     for(var i in extensions)      
  8.     {      
  9.         var ext = extensions[i];      
  10.        
  11.         if(ext in mime_types)      
  12.         {      
  13.             var mime = mime_types[ext];      
  14.        
  15.             if($.isArray(mime))      
  16.             {      
  17.                 jQuery.merge(mimes , mime);      
  18.             }      
  19.             else     
  20.             {      
  21.                 mimes.push(mime);      
  22.             }      
  23.         }      
  24.     }      
  25.        
  26.     return mimes;      
  27. }  

这里其实就是将ZIP，PNG这样的类型传入，然后返回一个这类文件对应的MIME/TYPE，比如定义一个 mime_types数组，如下：

JavaScript Code复制内容到剪贴板
  1. var mime_types = {      
  2. "gif":"image\/gif",     
  3. "jpeg":["image\/jpeg","image\/pjpeg"],     
  4. "jpg":["image\/jpeg","image\/pjpeg"],     
  5. "jpe":["image\/jpeg","image\/pjpeg"],     
  6. "png":["image\/png","image\/x-png"],     
  7. ..................     
  8. }    

重点关注的是HTML 5中，新的文件API，可以在客户端马上判断文件类型，如下： 

XML/HTML Code复制内容到剪贴板
  1. var files = evt.target.files; // 获得文件对象，是一个集合，可以有多个文件     
  2. var file_count = files.length;  //文件长度     
  3.      
  4. var file_1 = files[0]; // or files.item(0)；这里获得多个文件中的第一个文件     
  5.      
  6. var name = file_1.name; //获得文件名     
  7. var size = file_1.size;//获得文件大小     
  8. var type = file_1.type; //文件类型     
  9. var lastModifiedDate = file_1.lastModifiedDate;  //文件修改时间    

详细的关于HTML 5文件上传的，见： http://www.w3.org/TR/file-upload/

以上这篇html5 实现客户端验证上传文件的大小(简单实例)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

原文地址：http://www.manongjc.com/article/814.html

相关文章

  • HTML5实现的移动端购物车自动结算功能示例代码

    本文介绍HTML5实现移动端购物车自动结算,通过WebStorage、事件监听、DOM操作等技术,确保实时更新与数据同步,优化性能及无障碍性,提升用户体验，感兴趣的朋友一起看看吧
    2025-06-18

  • HTML5 中的＜button＞标签用法和特征

    在HTML5中，<button>标签用于定义一个可点击的按钮，它是创建交互式网页的重要元素之一，本文将深入解析HTML5中的<button>标签，详细介绍其属性、样式以及实际
    2025-06-18

  • 基于 HTML5 Canvas 实现图片旋转与下载功能(完整代码展示)

    本文将深入剖析一段基于 HTML5 Canvas 的代码，该代码实现了图片的旋转（90 度和 180 度）以及旋转后图片的下载功能,通过对代码的解读，我们可以学习到如何利用 Canvas API
    2025-06-18

  • HTML5 getUserMedia API网页录音实现指南示例小结

    本教程将指导你如何利用这一API，结合Web Audio API，实现网页录音功能,从获取音频流到处理和保存录音，整个过程将逐步详解,此外，还讨论了getUserMedia API的使用限制和最
    2025-06-16

  • HTML5 搜索框Search Box详解

    HTML5的搜索框是一个强大的工具，能够有效提升用户体验,通过结合自动补全功能和适当的样式，可以创建出既美观又实用的搜索界面,这篇文章给大家介绍HTML5 搜索框Search Box
    2025-06-13

  • 全面解析HTML5中Checkbox标签

    Checkbox是HTML5中非常重要的表单元素之一，通过合理使用其属性和样式自定义方法，可以为用户提供丰富多样的交互体验，这篇文章给大家介绍HTML5中Checkbox标签的深入全面解
    2025-06-13

  • HTML5无插件拖拽图片上传功能实现过程

    本实例展示了一种基于HTML5技术的图片上传功能，无需外部插件即可通过拖放图片实现上传,涉及到HTML5的拖放API和File API，以及使用CSS来增强用户界面的交互性和视觉反馈，
    2025-05-16

  • HTML5 定位大全之相对定位、绝对定位和固定定位

    在HTML5和CSS中，定位(positioning)是控制元素在页面上位置的重要机制,主要有四种定位方式：静态定位(static)、相对定位(relative)、绝对定位(absolute)和固定定位(fixed),
    2025-05-13

  • HTML5中的Microdata与历史记录管理详解

    Microdata作为HTML5新增的一个特性，它允许开发者在HTML文档中添加更多的语义信息，以便于搜索引擎和浏览器更好地理解页面内容，本文将探讨HTML5中Microdata的使用方法以及
    2025-04-21

  • HTML5表格语法格式详解

    在HTML语法中，表格主要通过< table >、< tr >和< td >3个标签构成,本文通过实例代码讲解HTML5表格语法格式，感兴趣的朋友一起看看吧
    2025-04-21

最新评论

关注微信公众号

扫一扫