• 提升品牌形象
  • 最新HTML5+Css3网站制作技术
  • 完全区分与同行的震撼视觉体验
  • 自动适应平板、手机及电脑屏幕
  • 详细介绍
  • 企业网站入门首选
  • 强大丰富的系统功能
  • 超过1000种页面风格
  • 每年仅需¥1500元,两年仅需¥2000元
  • 详细介绍
  • 4000/4006两种开头选择
  • 智能占线、断线呼转
  • 高达300组可呼转号码
  • 智能语音导航
  • 详细介绍

If you have any question,please contact with us.

  • 昆明网站建设-在线客服

    蛋切刀 一指
    妖异眼瞳
  • 昆明网站设计-服务电话

    4000-555-94113099998627
  • 昆明网站建设-联系地址

    昆明市官渡区岔街
    鸿运都市别墅5单元1101

HTML5 实例-微设计创意工坊 为您提供 昆明网站制作 昆明网站建设 昆明网站设计 云南网站建设 昆明网络公司

  • Home
  • /
  • HTML5 实例
实例5-4 通过类型过滤上传文件

实例5-4 通过类型过滤上传文件

1.功能描述

在页面表单中,创建一个“file”类型的<input>元素,并设置“multiple”属性为“true”,用于选择多个文件。当单击“选择文件”按钮,并选取了需要上传的文件后,如果选取的文件中存在不符合“图片”类型的文件,将在页面中显示总数量与文件名称。

2.实现代码

在DreamweaverCS5中新建一个HTML页面5-4.html,加入代码如代码清单5-4所示。

代码清单5-4 通过类型过滤上传文件

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8"/>
	<title>通过类型过滤上传文件</title>
	<linkhref="Css/css5.css" rel="stylesheet" type="text/css">
	<script type="text/javascript" language="jscript"
	          src="Js/js4.js"/>
	</script>
	</head>
	<body>
	<form id="frmTmp">
	 <fieldset>
	   <legend>上传过滤类型后的文件:</legend>
	   <input type="file" name=fileUpload" id="fileUpload"
	         onChange="fileUpload_CheckType(this.files);"
	         multiple="true"/>
	   <p id="pTip"/>
	 </fieldset>
	</form>
	</body>
	</html>

在代码清单5-4中,页面导入一个JavaScript文件js4.js,其中调用fileUpload_CheckTypeO方法,按设置的类型格式过滤需要上传的文件,其实现的代码如下所示:

	//JavaScript Document 
	function$$(id){
	    return document.getElementByld(id);
	}
	//选择上传文件时调用的函数
	function fileUpload_CheckType(f){
	    var strP="",
	    strN="",
	    intJ=0;
	    var strFileType=/image.*/;
	    for(var intI=0;intI<f.length;intI++){
	        var tmpFile=f[intI];
	        if(!tmpFile.type.match(strFileType)){
	           intJ=intJ+1;
	           strN=strN+tmpFile.name+"<br>";
	        }
	    }
	    strP="检测到("+intJ+")个非图片格式文件。";
	    if(intJ>0){
	      strP=strP+"文件名如下:<p>"+strN+"</p>";
	    }
	    $$("pTip").innerHTML=strP;
	}

3.页面效果

该页面在Chrome10浏览器中执行的页面效果如图5-4所示。

图5-4 使用file类型的<input>元素过滤上传文件类型

4.源码分析

在实例5-3中我们知道,如果上传文件是图片类型,则“file”对象返回的类型均以“image/”开头,后面添加表示所有的图片类型,或添加“gif”表示某种类型图片;因此,如果是一个图片文件,该文件返回的类型必定以“image/”字样开头。

根据这一特点,在本实例中,当遍历传回的文件集合时,通过match()方法检测每个文件返回的类型中是否含有“image/*”字样。如果没有,说明是非图片类型文件,分别将总量与文件名称以叠加的形式保存在变量中;然后,将变量的内容赋值给ID号为“pTip”的元素;最后,通过该元素显示全部过滤文件的总量与名称表,详细实现过程如JavaScript代码中加粗部分所示。

本文由昆明网站建设,昆明微设计整理发布,转载请保留链接


  • If you have any question,please contact with us.

  • QQ在线客服

    蛋切刀
    可乐上瘾
    妖异眼瞳
  • 服务电话

    4000-555-94113099998627
  • 联系地址

    昆明市官渡区岔街
    鸿运都市别墅5单元1101