html5 上传文件类型

html 的局限性：

    1  每次只能上传一个文件

    2 客户端只能获取被上传文件路径，无法访问实际的文件内容。

 

html5 的改变：

    type="file"  新增两个属性

        1  accept:     该属性控制允许上传的文件类型，该属性值为一个或多个MIME属性，多个MIME类型字符串之间以逗号分隔

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

 

File 对象是一个JS对象，js通过该对象获取取用户浏览的所有文件的信息，file对象包含如下属性

        1 name: 返回file对象对应的文件的文件名，不包括文件路径

        2 type:    返回该file对象对应的文件的MIME类型字符串

        3 size:    返回该file对象对应的文件的大小

 

例

    浏览图片：< input  id=" images"  type=" file"  multiple    accept=" image/*"/>

<input type="button" value="显示文件" onclick="showDetails();"/>
<script type="text/javascript">
var showDetails = function()
{
	var imageEle = document.getElementById("images");
	// 获取文件上传域内输入的多个文件
	var fileList = imageEle.files;
	// 遍历每个文件
	for(var i = 0 ; i < fileList.length ; i ++)
	{
		var file = fileList[i];
		div = document.createElement("div");
		// 依次读取每个文件的文件名、文件类型、文件大小
		div.innerHTML = "第" + (i + 1) + "个文件的文件名是：" + file.name
			+ "，该文件类型是：" + file.type
			+ "，该文件大小为：" + file.size;
		// 把div元素添加到页面中。
		document.body.appendChild(div);
	}
}
</script>

转载于:https://www.cnblogs.com/soofly/p/3460889.html