JavaScript 验证提交文件的信息

前言

目前工作任务终于告一段落了,今天发现之前写的文件上传的代码有点小瑕疵,就是上传图片如果超过 2M 就会出错,因为七牛云好像限制了上传图片的大小,所以就用 JavaScript 在文件选中之后,上传之前对文件的大小进行判断,网上找了好的资料都不尽人意,我的身边就躺着一本《JavaScript 编程全解》呢,我居然忽略它。看了几眼,分分钟解决问题。

File 对象

文件的选择:

  • 通过拖动于释放功能进行选择(目前还用不上)
  • 通过文件选择对话框进行选择

<input type="file">的属性一览

属性名 说明
accept 以 MIME Type 来指定允许选择的文件类型。可以通过逗号分隔符来同时指定多种文件类型
multiple 允许同时选择多个文件
files 含有所选择文件的 File 对象的数组
onchange 在文件被选择时将将被执行的事件处理程序

HTML 代码

<input type="file" accept="image/*" id="file">
{{--限制只能上传图片文件--}}
<input type="submit" value="上传"/>

accept 的属性除了 image/*、 还有audio/*、video/* 。如果需要进一步限制选择的图片文件的格式,则可以通过逗号分隔符的形式来制定,如 "image/png, image/gif" 来指定 accept 属性所允许的 MIME Type。

File 对象的接口

属性名 说明
name 文件名
size 文件尺寸(单位 byte)
type 文件类型(MIME Type)
lastModifiedData 文件的最后更新时间
slice(start, end, contentType) 切取文件的一部分

JavaScript 代码

<script>
document.getElementById('file').onchange = function(event) {
var file = event.target.files[0];
if (file.size/1024/1024 > 2) {
alert('图片不能大于2M');
document.getElementById('file').value=""; //清空已选资源
}
}
</script>

好吧,就单纯这本书帮我解决了一个问题这一点来说,我就应该把它看完,趁着最近没什么工作~

上一篇:WebApp开发总结


下一篇:如何用Ajax实现地址栏省市级联动(数据库表数据源)