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="imagestype="filemultiple   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>

posted on 2013-12-06 10:16  小刈  阅读(654)  评论(0编辑  收藏  举报

导航