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

时间：2021-05-08

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

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

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

XML/HTML Code复制内容到剪贴板
  • <inputtype="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')
  • {
  • varfile_types=$(this).attr('data-file_type').split('|');
  • }
  • varmimes=get_mimes(file_types);
  • //文件要求的指定大小
  • varmax_size=parseInt($(this).attr('data-max_size'));
  • $(this).change(function(evt)
  • {
  • varfinput=$(this);
  • varfiles=evt.target.files;//获得文件对象
  • varoutput=[];
  • for(vari=0,f;f=files[i];i++)
  • {
  • //检查文件的类型是否符合指定要求
  • if(jQuery.inArray(f.type,mimes)==-1)
  • {
  • alert('Filetype'+f.type+'notallowed');
  • $(this).val('');
  • continue;
  • }
  • //检查文件大小
  • elseif(f.size>max_size)
  • {
  • alert('Maximumfilesizeis'+max_size+'bytes.');
  • $(this).val('');
  • }
  • //Validationok
  • else
  • {
  • output.push('[b]',f.name,'[/b](',f.type||'n/a',')-',f.size,'bytes,lastmodified:',f.lastModifiedDate.toLocaleDateString());
  • }
  • }
  • finput.after('<div>'+output.join('')+'</div>');
  • });
  • });

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

    JavaScript Code复制内容到剪贴板
  • functionget_mimes(extensions)
  • {
  • varmimes=[];
  • for(variinextensions)
  • {
  • varext=extensions[i];
  • if(extinmime_types)
  • {
  • varmime=mime_types[ext];
  • if($.isArray(mime))
  • {
  • jQuery.merge(mimes,mime);
  • }
  • else
  • {
  • mimes.push(mime);
  • }
  • }
  • }
  • returnmimes;
  • }

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

    JavaScript Code复制内容到剪贴板
  • varmime_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复制内容到剪贴板
  • varfiles=evt.target.files;//获得文件对象，是一个集合，可以有多个文件
  • varfile_count=files.length;//文件长度
  • varfile_1=files[0];//orfiles.item(0)；这里获得多个文件中的第一个文件
  • varname=file_1.name;//获得文件名
  • varsize=file_1.size;//获得文件大小
  • vartype=file_1.type;//文件类型
  • varlastModifiedDate=file_1.lastModifiedDate;//文件修改时间

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

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

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

    声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

    相关文章