HTML5为type='file' 的<input/>元素增加了两个属性。

accept :该属性控制允许上传的文件类型。该属性为一个或多个MIME类型字符串。多个MIME类型字符串之间应以都好分割。

multiple：该属性设置是否允许选择多个文件

JavaScript可以通过files属性访问type='file'的<input/>元素生成的文件上传域的所有文件，该属性返回一个FileList对象，FileList对象相当于一个数组，开发者可以使用类似于数组的方法来访问该数组内的每个File对象。

File对象是一个JavaScript对象，可以通过该对象获取浏览器的所有文件信息。File对象包含如下属性。

name:返回该File对象对应的文件的文件名， 不包括文件路径部分

type：返回该File对象的文件的MIME类型字符串。

size：返回该File对象的对应的文件的大小，字节单位

   预览图片：
        <input id="images" type="file" multiple accept="image/*" />
        <script type="text/javascript">
            var imgInput = document.getElementById('images');
            imgInput.onchange = function () {
                //1.获取所有选中文件列表
                var fileList = imgInput.files;
                //2.遍历显示信息
                for (var i = 0; i < fileList.length; i++) {
                    var file = fileList[i];
                    //一次读取文件的文件名，文件类型，文件大小
                    var div = document.createElement('div');
                    div.innerHTML = "第" + (i + 1) + "个文件的文件名：" +
                        file.name
                        + ",文件类型：" + file.type
                        + "，文件大小：" + file.size;
                    //添加到 body中
                    document.body.appendChild(div);
        </script>

显示结果：

提示： 该文件选择框设置了accept='image/*'只显示图片。

不要靠accept属性来过滤文件类型，因为这只是客户端的文件类型过滤，这种文件类型过滤是很脆弱的，如果开发者需要进行文件上传，则必须在服务器端对文件类型进行过滤。

二、使用FileReader读取文件内容

FileReader同样是一个JavaScript对象，开发者可以通过该对象在客户端读取 文件上传域所选择的文件内容. 关于FileReader

读取文本文件： < input type ="file" id ="file1" /> </ div > 读取为二进制： < input type ="file" id ="file2" /> </ div > 读取为DataURL： < input type ="file" id ="file3" accept ="*" /> </ div > < p id ="result" style ="width:100%;word-break:break-all;word-wrap:break-word;" ></ p > < script type ="text/javascript" > // 判断浏览器是否支持FileReader对象 var reader if (FileReader) { reader = new FileReader(); } else { alert( ' 您的浏览器不支持FileReader对象 ' ); // 1.读取为文本 var file1 = document.getElementById( ' file1 ' ); file1.onchange = function () { var file = file1.files[ 0 ]; // 判断读取的第一个文件是否是文本文件 if ( / text\/\w+ / .test(file.type)) { // 以文本的方式读取内容 reader.readAsText(file, ' gbk ' ); reader.onload = function () { document.getElementById( ' result ' ).innerHTML = reader.result; } else { alert( ' 读取的不是文本文件 ' ); // 2.读取为二级制 var file2 = document.getElementById( ' file2 ' ); file2.onchange = function () { var file = file2.files[ 0 ]; // 以二进制流的方式读取第一个文件 // reader.readAsArrayBuffer(file); //返回二进制数组 reader.readAsBinaryString(file); // 返回二进制字符串 reader.onload = function () { document.getElementById( ' result ' ).innerHTML = reader.result; // 3.读取为DataURL var file3 = document.getElementById( ' file3 ' ); file3.onchange = function () { var file = file3.files[ 0 ]; reader.readAsDataURL(file); reader.onload = function () { document.getElementById( ' result ' ).innerHTML = reader.result; </ script >

FileReader在读取文件的过程中可能多次触发onprogress事件，通过该事件绑定监听器即可实时监控文件的读取进度。

提示：FileReader只是客户端的JavaScript对象，使用FileReader所进行的上传也只是把磁盘上的文件读取到浏览器内存中，并未真正上传到服务器。如果需要真正把客户端文件上传到服务器，则可把文件数据以POST请求方式提交到远程服务器，远程服务器负责接收文件数据，并把数据内容保存到服务器。

读取二进制文件： < input type ="file" id ="file1" accept ="*" /> </ div > 显示进度： < progress id ="pro" value ="0" ></ progress > </ div > < div id ="result" ></ div > < script type ="text/javascript" > var file1 = document.getElementById( ' file1 ' ); file1.onchange = function () { var file = file1.files[ 0 ]; // 读取为二进制 var reader = new FileReader(); reader.readAsBinaryString(file); // 显示进度 var pro = document.getElementById( ' pro ' ); pro.max = file.size; pro.value = 0 ; reader.onprogress = function (e) { pro.value = e.loaded; reader.onload = function () { document.getElementById( ' result ' ).innerHTML = reader.result; </ script >