HTML5 新特性之 type=file 文件上传功能详解及获取上传文件信息

好，咱们直接聊咋做这个基本的文件上传。HTML5里面，你只要添个input标签，把type属性设置成file就搞定了。像这儿：。是不特简单？这么搞一下，网页上立马出现一个按钮，点一下就能挑着要传哪个文件！

HTML5独有的文件上传属性

HTML5给我带来了几个炫酷的新的文件上传属性，让我在选择文件和上传时，能更自由地上手操作。

属性一：multiple

明白这个属性？多选文件一气呵成，一下就好！这样子，好多文件可以一锅端，省时省心省力气！来看这个例子：。

属性二：accept

这个参数就是让我们定下允许上传的几个文件种类。例如：，那么在上传时，只有图片文件才能出现在那个小窗口里！这样就能避免乱七八糟的文件类型混进来~这样就能有效地管理和规范文件格式了！

属性三：required

请务必选好要上传的文件！只需加上’required’属性到input标签中，系统会自动阻止用户没选文件时提交表单。安全性杠杠滴~

获取上传的文件信息

当你选中要上传的文件时，该如何知道每个文件是啥类型、多大、叫什么名字呢?这玩意儿在HTML5里可以交给JavaScript帮忙搞定喔。只需利用`FileList`，就能看到用户选好的所有文件，接着再一一抓取它们的详细资料，比如大小，类型，甚至那个大家都熟悉的文件名等等。如此一来，我们就可以更方便地对上传的文件进行接下来的操作了。

文件上传的实际应用

网页上常常要用到上传文件这个功能，多用于上传图片、头像之类的。现在有了HTML5这个新玩意儿，让做这些事情变得比以前更容易，同时用户使用时的感觉也变好了

文件上传的兼容性问题

nbsp;html>
    
        
        
        
    
    
        
        
        
            var test = document.getElementById('test');
            test.addEventListener('change', function() {
                var t_files = this.files;
                var str = '';
                for(var i = 0, len = t_files.length; i < len; i++) {
                    console.log(t_files[i]);
                    str += '' + t_files[i].name + '
';
                };
                document.getElementById('content').innerHTML = str;
            }, false);
        
    

别看HTML5文件上传功能挺牛的，其实也是有bug滴。就像那些老古董浏览器就可能搞不定新的属性。所以，咱做项目时得先看看浏览器支不支持，或者弄个备用法子，保证大家都能用上这个功能。

文件上传的安全性考虑

文件上传虽方便，可也有些小风险！就像有些坏蛋会偷偷上传病毒文件或恶意脚本来攻击我们计算机一样。所以咱们在搞这个上传功能的时候，得设置个安全防线，看看那些传过来的文件格式对不对，有多大，甚至用上病毒扫描工具什么的，保证上传的东西都是安全的。

文件上传的未来发展

时代在变，咱们传文件的这个玩意儿也要跟着进化！就比如说，以后可能能上传更多种类的文件，或者传得更快了。所以，咱们这些开发者们可得时刻盯紧这方面的变化，这样才能给大家带来更棒的使用体验。