html5 如何实现客户端验证上传文件的大小
在HTML 5中,现在可以在客户端进行文件上传时的校验了,比如用户选择文件后,可以 马上校验文件的大小和属性等。本文章向码农介绍html5 如何实现客户端验证上传文件的大小,感兴趣的码农可以参考一下。
在HTML 5中,现在可以在客户端进行文件上传时的校验了,比如用户选择文件后,可以马上校验文件的大小和属性等,这其实时得益于浏览器端新增的对文件的校验能力,其中支持HTML 5的浏览器,都会实现W3C实现的文件API标准,其中可以读取客户端文件的各种信息和参数。
下面的例子如下,首先是HTML
<input type="file" data-file_type="zip|png" data-max_size="1000000">
这里data-file_type属性中,指定了文件的类型,接受ZIP,PNG文件,用|分隔开来,其中data-max-size指定文件的大小,这里是1MB。然后使用jquery 进行判断
$('input[type=file]').each(function()
{ if(typeof $(this).attr('data-file_type') == 'string') { var file_types = $(this).attr('data-file_type').split('|'); } var mimes = get_mimes(file_types); //文件要求的指定大小 var max_size = parseInt($(this).attr('data-max_size')); $(this).change(function(evt) { var finput = $(this); var files = evt.target.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.name, '[/b] (', f.type || 'n/a', ') - ', f.size, ' bytes, last modified: ', f.lastModifiedDate.toLocaleDateString() ); } } finput.after('<div>' + output.join('') + '</div>'); });
});
在上面的代码中, var mimes = get_mimes(file_types); 其实是一个方法,如下:
/*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;
}
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,可以在客户端马上判断文件类型,如下:
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/
原文地址:http://www.manongjc.com/article/814.html
相关阅读:
Resumable HTML5 File API 的文件上传
html5解决大文件断点续传/上传的方法
php结合html5 实现大文件上传的方法
html5 分片/分块/分割上传超大文件
转载于:https://www.cnblogs.com/myhomepages/p/6010097.html
html5 如何实现客户端验证上传文件的大小相关推荐
- 如何上传html验证文件大小,html5 实现客户端验证上传文件的大小(简单实例)
在HTML 5中,现在可以在客户端进行文件上传时的校验了,比如用户选择文件后,可以 马上校验文件的大小和属性等.本文章向码农介绍html5 如何实现客户端验证上传文件的大小,感兴趣的码农可以参考一下. ...
- 七牛 savekey php,七牛云1:客户端直接上传文件
最近因为项目要用到七牛云,所以花了点时间整理了一下学习心得. 使用七牛云,第一步当然就是上传文件了,常见的云存储上传文件流程一般有3种: 用户==>业务服务器(你自己的服务器)==>云存储 ...
- 验证上传文件真实格式
1 /// <summary> 2 /// 验证上传文件真实格式 3 /// </summary> 4 /// <param name="fileUpload& ...
- 如何限制上传服务器的文件容量,如何通过配置php文件限制上传文件的大小
在网站开发的过程中,为了确保能够充分利用服务器的空间,在开发上传功能时,必须对上传文件的大小进行控制.那么我们如何进行对上传文件的大小进行控制呢? 控制文件的大小可以从两个方面入手: 第一个是在PHP ...
- 008. 限制上传文件的大小
第一种方法: 利用web.config的配置文件项, 进行设置; 前端aspx示例: <%@ Page Language="C#" AutoEventWireup=" ...
- aws php 上传文件 限制大小_php如何实现文件上传下载-PHP问题
php实现文件上传下载的方法:首先创建好表单页面:然后将客户端文件上传到服务器端:最后将服务器端的文件移动到指定目录即可. 推荐:<PHP视频教程> PHP实现文件上传与下载 一.上传原理 ...
- JS实现限制input上传文件的大小和格式
场景 在实现Excel导入数时,需要上传excel格式的文件. 在前端js进行判断,限制上传文件的大小和格式. 实现 html页面代码可以通过accept属性来筛选打开文件的格式. <form ...
- 如何修改WampServer服务器上传文件的大小?
修改WampServer服务器上传文件的大小 序: 默认情况下服务器对上传文件的大小是有限制的, 如果想修改上传文件的限制可以修改php.ini文件 ➢file_uploads = On(是否允许上传 ...
- 手机如何看python文件大小_如何安全地检查上传文件的大小?(How to check size of uploaded file safely in bottlepy?)...
如何安全地检查上传文件的大小?(How to check size of uploaded file safely in bottlepy?) 我真的害怕read()操作,因为它使用内存. 例如,任何 ...
最新文章
- html 可调节进度条控件,jQuery简单实用的轻量级进度条插件
- 升级gcc后glibc报错
- python读取大文件csv内存溢出_Python,内存错误,csv文件太大
- Java Spring注解实现分析之@requestMapping工作原理
- add git 指定类型文件夹_UE4 使用git配合远程仓库
- Android 使用控件自定义背景实例
- java jstack 工具_java命令之jstack工具
- OpenShift 4 - DevSecOps Workshop (4) - 为 Task 增加参数和Workspace
- AndroidStudio_后台_服务的介绍_生命周期_注册_启动停止---Android原生开发工作笔记215
- Trick(一)——判断一个数的位数
- cesium 经纬度绘制点_Cesium搜索经纬度并标点
- paddle 图标注_没那么简单,手把手教你用Origin制作XRD谱图!
- excel批量生成批处理语句另存为.bat文件批量改名
- 测设面试题笔试题总结
- python 将List中元素两两组合
- html打飞机游戏代码,利用HTML5 Canvas实现打飞机游戏
- WordPress文章发布失败或更新失败解决方法
- 【网易邮箱】换绑安全手机(①之前的手机号注销了怎么办 ②网易人工客服在哪)
- Python时间包datetime的使用
- 浏览器防关联软件:Tinder ,Badoo 交友软件如何防关联反指纹?
热门文章
- LeetCode算法题10:DFS/BFS-扫雷游戏
- Spring Boot集成Hazelcast实现集群与分布式内存缓存
- 网络安全法今日实施 互联网企业对隐私政策重视不足
- 数据表记录包含表索引和数值,请对表索引相同的记录进行合并,即将相同索引的数值进行求和运算,输出按照key值升序进行输出。...
- 7 款从 HTML 文档提取文本的工具
- KeyMob移动广告聚合平台助力开发者,提供广告聚合服务
- Spring MVC配置静态资源的正常访问
- axis2常用命令(wsdl2java)
- 设计模式(十一)桥梁模式(结构型)
- asp.net夜话之五:Page类和回调技术