在 html 5 中，现在可以在客户端进行文件上传时的校验了，比如用户选择文件后，可以 马上校验文件的大小和属性等。本 文章 向码农介绍ht ML 5 如何实现客户端验证上 传文件 的大小，感兴趣的码农可以参考一下。
在HTML 5中，现在可以在客户端进行文件上传时的校验了，比如用户选择文件后，可以马上校验文件的大小和属性等，这其实时得益于浏览器端新增的对文件的校验能力，其中支持HTML 5的浏览器，都会实现W3C实现的文件API标准，其中可以读取客户端文件的各种信息和参数。
下面的例子如下，首先是HTML
XM L/HTML Code 复制内容到剪贴板
< input &nbs p; ty PE = "file" data-file_type = "zip|png" data-max_size = "1000000" >
这里data-file_type属性中，指定了文件的类型，接受ZIP，PNG文件，用|分隔开来，其中data-max -s ize指定文件的大小，这里是1MB。然后使用 jq uery 进行判断
JavaScript Code 复制内容到剪贴板
$( 'input[type=file]' ). each ( function () { if ( typeof $( this ).attr( 'data-file_type' ) == 'string' ) { VAR file_types = $( this ).attr( 'data-file_type' ).spl IT ( '|' ); } var ;m imes = get_mimes(file_types); //文件要求的指定大小 var max_size = pars ei nt($( this ).attr( 'data-max_size' )); $( this ).change( function (evt) { var finput = $( this ); var files = evt.t arg et.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) { alert( 'Maximum file size is ' + max_size + ' bytes.' ); $( this ).val( '' ); } //Validation ok else { output.push( '[b]' , f.n am e, '[/b] (' , f.type || 'n/a' , ') - ' , f.size, ' bytes, last modified: ' , f.lastModifiedDate.toLocaleDa test ring() ); } } finput.after( '<div>' + output.join( '' ) + '</div>' ); }); });
在上面的代码中， var mimes = get_mimes(file_types); 其实是一个方法，如下：
JavaScript Code 复制内容到剪贴板
/* Get the mimes of a list of extensions as an array */ function get_mimes(extensions) { var mimes = []; for ( var i in extensions) { var ext = extensions[i]; if (ext in mime_types) { var mime = mime_types[ext]; if ($.isArray(mime)) { jQuery.merge(mimes , mime); } else { mimes.push(mime); } } } return mimes; }
这里其实就是将ZIP，PNG这样的类型传入，然后返回一个这类文件对应的MIME/TYPE，比如定义一个 mime_types数组，如下：
JavaScript Code 复制内容到剪贴板
var mime_types = { "gif" : "image\/gif" , "jpeg" :[ "image\/jpeg" , "image\/pjpeg" ], " jpg " :[ "image\/jpeg" , "image\/pjpeg" ], "jpe" :[ "image\/jpeg" , "image\/pjpeg" ], "png" :[ "image\/png" , "image\/x-png" ], .. ................ }
重点关注的是HTML 5中，新的文件API，可以在客户端马上判断 文件类型 ，如下：
XML/HTML Code 复制内容到剪贴板
var files = evt .target.files; // 获得文件对象，是一个集合，可以有多个文件 var file_count = files .length; //文件长度 var file_1 = files [0]; // or files.item(0)；这里获得多个文件中的第一个文件 var name = file_1 .name; //获得文件名 var size = file_1 .size;//获得文件大小 var type = file_1 .type; // 文件类 型 var lastModifiedDate = file_1 .lastModifiedDate; //文件修改时间
详细的关于HTML 5文件上传的，见： http://www.w3. org /TR/file-upload/
以上这篇html5 实现客户端验证上传文件的大小( 简单 实例)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。
原文地址： http://www.manongjc.com/article/814.html
总结
以上是 为你收集整理的 html5 实现客户端验证上传文件的大小(简单实例) 全部内容，希望文章能够帮你解决 html5 实现客户端验证上传文件的大小(简单实例) 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于html5 实现客户端验证上传文件的大小(简单实例)的详细内容...