html5 完成顾客端认证提交文档的尺寸(简易案例

日期：2021-01-19 类型：科技新闻 

关键词：怎么把小程序变成二维码，微信小程序怎么开通，微信小程序csdn，小程序开发，网络答题小程序

在HTML 5中，如今能够在顾客端开展文档提交时的校检了，例如客户挑选文档后，能够 立刻校检文档的尺寸和特性等。本文章内容向码农详细介绍html5 怎样完成顾客端认证提交文档的尺寸，感兴趣爱好的码农能够参照1下。

在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) == ⑴)      
  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); 实际上是1个方式，以下： 

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这样的种类传入，随后回到1个这类文档对应的MIME/TYPE，例如界定1个 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; // 得到文档目标，是1个结合，能够有好几个文档     
  2. var file_count = files.length;  //文档长度     
  3.      
  4. var file_1 = files[0]; // or files.item(0)；这里得到好几个文档中的第1个文档     
  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 完成顾客端认证提交文档的尺寸(简易案例)便是网编共享给大伙儿的所有內容了，期待能给大伙儿1个参照，也期待大伙儿多多适用脚本制作之家。

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

上一篇：如何令手机微信大转做大做强动更吸引住客户 返回下一篇：没有了