Web前端文件处理
在项目中,我们经常会有这样的需求,对上传的文件大小进行限制,传统的做法是在服务器端进行大小限制,例如nginx通过client_max_body_size,php.ini中可以通过upload_max_filesize和post_max_size来设置上传的文件大小。这种做法的缺陷很明显,数据上传到服务器之后,再对其进行监测,大大增加了宽带和服务器的压力。何不放在客户端进行检测?
在IE10及以下的版本,可以通过如下方式检测需要上传文件的大小:
<input type="file" onchange="checksize()"/> <script> function checksize(e){ var ev = e || window.event; var uri = ev.srcElement.value; var img = new Image(); img.onload=function(){ alert("文件大小为"+(img.fileSize)/1024+"KB"); } img.src=uri; } </script>
上面的代码的运行原理是把上传的文件模拟成图片,通过其fileSize属性获取其大小,而由于浏览器的安全策略,其几乎只能运行在本地打开此网页的情况。加上微软在IE11上已经废除了fileSize的属性1,而现代浏览器厂商为了保护本地操作系统,在用户上传文件的时候,本地资源路径一律采用fakepath2,更加阻止了这种方法获取文件大小的可行性。 …阅读更多>>