js调用html文件上传,JavaScript里的文件上传API

对于Web程序员来说，在网页上处理文件上传，总是一件很麻烦的事情。在过去，我们不能够通过拖拽上传图片，也没有复杂Ajax上传技术，很少处理多文件批量上传。我们也无法获取上传过程中的信息，除非上传完成后从服务器端获得。有时候，等你上传完毕后才发现上传的文件不合适——真该死！

如今，HTML5的革命，现代浏览器的诞生，JavaScript的升级，这些给我们提供了使用Javascript和input[type=file]元素获取上传文件过程信息的能力。下面就来看看这些上传文件API是如何使用的！

访问要上传的文件列表信息

如果要获得所有input[type=file]里要上传的文件列表，你需要使用files属性：

// Assuming

var uploadInput = document.getElementById('upload');

uploadInput.addEventListener('change', function() {

console.log(uploadInput.files) // File listing!

});

不幸的是，这个FileList并没有一个叫做forEach的方法，所以我们只能使用老式的循环技巧对FileList进行循环操作：

for (var i = 0, fileCount = uploadInput.files.length; i < fileCount; i++) {

console.log(files[i]);

}

很重要的一点，FileList里是有一个length属性的。

获取单个上传文件的信息

FileList里的每个文件对象里都保存着大量的关于这个文件的信息，包括文件的体积大小，文件MIME类型，最后修改时间，文件名称等：

{

lastModified: 1428005315000,

lastModifiedDate: Thu Apr 02 2015 15:08:35 GMT-0500 (CDT),

name: "profile.pdf",

size: 135568,

type: "application/pdf",

webkitRelativePath: ""

}

这些基础信息对我们来说最大的用处就是，我们可以在上传文件之前校验它们。例如，你可以校验文件的类型和体积大小：

var maxAllowedSize = 500000;

for (var i = 0, fileCount = uploadInput.files.length, totalSize = 0; i < fileCount; i++) {

totalSize += files[i].size;

if(totalSize > maxAllowedSize) {

// Notify the user that their file(s) are too large

}

if(files[i].type != 'application/pdf') {

// Notify of invalid file type for file in question

}

如果用户上传的文件的体积太大，超过了允许范围，或上传的类型不对，你可以阻止用户上传，然后给予他们必要的提示，是什么原因不能上传成功。

今天就对文件上传API做这么多简单的介绍。这是一个很好的API，帮助我们放置在上传文件时浪费大量的时间。这个文件上传API里很有很多这里没有介绍的知识，你可以到MDN上进心详细阅读。

js调用html文件上传,JavaScript里的文件上传API相关推荐

html js引用本地资源,了解使用JavaScript读取本地文件的方法
本篇文章给大家介绍一下使用JavaScript读取本地文件的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 出于安全和隐私的原因,web应用程序不能直接访问用户设备上的文件.如 ...
原生JS调用打印预览页面并实现打印文件流图片（亲测有效）
在工作中我们经常会遇到使用浏览器预览打印页面并实现文件打印,那么如何才能够在打印预览页面中显示图片呢?希望看完这篇文章对您有所帮助! 1. 原生JS调用打印预览页面 2. 在打印预览页面加载图片使用 ...
c语言判断文件为空,javascript如何判断文件是否为空？
JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果.通常JavaScript脚本是通过嵌入在HTML中来实现 ...
计算机文件克隆到光盘,有什么软件可以直接将电脑里的文件复制到光盘里电脑文件刻录到dvd光盘软件...
电脑用久了自然积累有不少的文件,有一些杂七杂八.类型不同的电脑文件,放电脑上占地儿,但又不能删除掉,此时可以考虑备份到光盘上.有什么软件可以直接将电脑里的文字复制到光盘里呢?这里分享电脑文件刻录到dv ...
win10计算机里文件夹怎么删除文件,Win10开始菜单里的文件夹怎么删除,删除开始菜单文件夹教程方法...
从win xp时代开始,很多用户就已经习惯了使用开始菜单,包括打开一些软件,或者关机.那这篇文章UU诊所要给大家说到的是win10系统开始菜单的文件夹怎么删除,直接在开始菜单删除文件夹是无法删除的,文 ...
u盘安装成功计算机里找不到文件夹,u盘里的文件不见了,详细教您U盘内容不显示怎么办...
在工作.学习中,我们需要把资料携带外出的时候,首选的存储工具基本上都是U盘.不过有用户在使用U盘时却遇到了U盘的所有的文件夹不见了的情况,但内存的明明文件还在,这到底是为什么呢?难道U盘的文件真的不见 ...
计算机中的文件怎么加密文件,想把电脑里的文件加密怎么弄？
隐藏/加密文件的办法 ①点击"开始"菜单 ②点开之后,点击稍靠右下角的"运行".这个时候,显示器的左下角,会出现一个小小的"运行"对话窗口 ...
js pdf文件如何调用打印机打印_可以使用Javascript打开PDF文件的打印对话框吗？...
繁花不似锦我通常使用一种类似于如何使用JavaScript打印PDF(eHow.com)的方法iframe.一个容纳打印触发器的功能......function printTrigger(eleme ...
微信里怎么打开html文件夹下,微信里的文件夹怎样在电脑里打开
微信收藏怎么导出?我的微信里面收藏的内容不少,想要传到电脑上,主要是一些比较好的文章和图片,收藏内容太多的话,会有些麻烦.那么微信我的收藏怎么导出到电脑?小编就为大家介绍导出的方法,希望能帮到大家! ...
cordova js(javascript)读取本地文件（将本地的bin文件转成字节数组）
此问题已经解决,解决方法参考我的博客: cordova本地存储(存取): 读取项目里的本地文件文章目录 1.下面两个比较有用: 2.下面两篇博客证明不用input标签的情况下,无法获取本地文件(包括 ...

js调用html文件上传,JavaScript里的文件上传API

js调用html文件上传,JavaScript里的文件上传API相关推荐

最新文章

热门文章