C实验指导书实验.doc
.Net Web应用程序设计 实验指导书（草稿） 李盘靖山东理工大学计算机学院实验五 服务器控件FileUpload的综合应用实验目的1.了解各种标准服务器控件；2.熟悉基于标准服务器控件的Web应用程序的开发过程；3. 综合应用各种标准服务器控件进行Web应用程序的开发。实验内容实验项目：文件的上传文件的上传下载在B/S架构中应该是常见的需求，比如考试报名时需要上传照片、办公自动化系统中需要上传文档。以下内容为在FileUpload控件基础上，如何实现文件的上传及其大小、类型等相关信息的获取，结合JavaScript脚本等如何实现图片的预览以及如何通过Web.config对上传文件的大小作出限定。 实验步骤1. 建立ASP.NET Web应用程序项目FileUpload，在生成的默认页面中加入如下三个控件，用来上传文件并显示其基本信息： <asp:FileUpload ID="fileUp" runat="server" /><br /> <asp:Button ID="bnUpload" runat="server" Text="上传文件" /><br /> <asp:Label ID="lbFileInfo" runat="server"></asp:Label></div>2. 不添加任何事件，编译运行，可见asp:FileUpload对应的HTML元素为：<input type="file" name="fileUp" id="fileUp" />同时注意到客户端对应生成的Form表单多了enctype的属性：<form name="form1" method="post" action="Default.aspx" id="form1" enctype="multipart/form-data">3. 为bnUpload添加单击事件：protected void bnUpload_Click(object sender, EventArgs e) string strFileName; string strFilePath; strFileName = Path.GetFileName( this.fileUp.PostedFile.FileName); strFilePath = Server.MapPath(".") + "" + strFileName; this.fileUp.PostedFile.SaveAs(strFilePath); this.lbFileInfo.Text = "文件上传成功，基本信息如下：" + "<br>保存路径" + strFilePath + "<br>文件名称" + strFileName + "<br>文件大小" + this.fileUp.PostedFile.ContentLength + "<br>文件类型" + this.fileUp.PostedFile.ContentType + "<br>本地路径" + this.fileUp.PostedFile.FileName;4. 编译运行后，选择一小于4M的任意类型文件，单击上传后看能否实现正常的上传功能，并观察上传文件在服务器端的位置。小结：由上可以注意到asp:FileUpload控件主要提供选择本地文件的功能，同时将选择的文件封装到PostedFile对象中，可通过对应的属性获取待上传文件的属性，并提供SaveAs方法用于在指定位置保存。5. 在没有选择文件时，就单击上传，看是否会出错。会小结：FileUpload显示一个文本框控件和一个浏览按钮，使用户可以选择客户端上的文件并将它上传到服务器。可通过在控件的文本框中输入本地路径指定要上载的文件，也可以通过单击“浏览”按钮，然后在“选择文件”对话框中选择文件。需要注意的是：用户选择要上载的文件后，FileUpload控件并不会自动将该文件上传。需要显式提供通过控件等机制让用户提交选定的文件，如加入一个“上传”按钮，让用户单击后上传文件。通常在回发（PostBack）到服务器的事件处理方法中调用SaveAs方法，用以在服务器端保存上传的文件。而在在调用SaveAs之前，一般使用HasFile属性验证是否包含文件。用PostedFile=null来验证是不可取的，因为默认情况下该属性包含0字节，即使FileUpload控件为空，PostedFile仍将返回一个非空值。6. 在bnUpload的单击事件代码中添加：protected void bnUpload_Click(object sender, EventArgs e) if (!this.fileUp.HasFile) return; string strFileName;7. 重新编译运行后，在没有选择文件时，单击上传，看是否会出错。8. 同上例，尝试上传一个大文件，如几百M的电影，看是否会出错。小结：一般地认为，默认只能上传<4M的文件（其目的在于防止拒绝服务攻击，如因用户向服务器发送大型文件而导致的拒绝服务攻击），否则将显示一个“无法显示页面”的页面。可以通过设置httpRuntime元素的maxRequestLength属性来允许上载更大的文件。若要增加整个应用程序所允许的最大文件大小，请设置Web.config文件中的 maxRequestLength 属性。若要增加指定页所允许的最大文件大小，请设置Web.config中location元素内的maxRequestLength属性。9. 在Web.config文件将maxRequestLength分别设置为1和1024，分别上传一个100K左右的文件，看其结果有何不同。<configuration> <system.web> <httpRuntime maxRequestLength="1"/> </system.web></configuration>10. 在Web.config文件添加location元素后，将基path指向当前页面，并将maxRequestLength设置为，再上传一个几百M的电影，观察其结果（可事先启动任务管理器，观察这一过程对CPU和内存的占用情况）。死机了<configuration> <system.web> <httpRuntime maxRequestLength="1"/> </system.web> <location path="Default.aspx"> <system.web> <httpRuntime maxRequestLength=""/> </system.web> </location></configuration>11. 思考：Web.config在网站开发中的基本作用是什么，location的优先级别，为什么默认上传文件的大小上限被设置为4M，将其上限改大后有何风险。12. 使用FileUpload控件上传文件一般有如下几个步骤：1）利用HasFile属性判断是否上传了文件。2）在服务器上指定一个物理路径，并检查这个物理路径是否存在，如果不存在则先创建。3）根据指定的服务器路径，利用SaveAs()保存上传的文件。同时可以验证上传的文件格式、大小等是否符合要求。4）将相对路径或者URL地址保存至数据库或其它地方，以便以后下载。13. 功能扩展：对于给定服务器物理路径，怎么判断其是否存在，在不存在的前提下如何创建。提示：利用System.IO.Directory的方法。protected void bnUpload_Click(object sender, EventArgs e) if (!this.fileUp.HasFile) return; string strFileName; string strFilePath; strFileName = Path.GetFileName( this.fileUp.PostedFile.FileName); strFilePath = Server.MapPath("/upload/"); if (!System.IO.Directory.Exists(strFilePath) System.IO.Directory.CreateDirectory(strFilePath); this.fileUp.PostedFile.SaveAs(strFilePath); this.lbFileInfo.Text = "文件上传成功，基本信息如下：" + "<br>保存路径" + strFilePath + "<br>文件名称" + strFileName + "<br>文件大小" + this.fileUp.PostedFile.ContentLength + "<br>文件类型" + this.fileUp.PostedFile.ContentType + "<br>本地路径" + this.fileUp.PostedFile.FileName; 调试后有错误14. 功能扩展：如何在文件上传成功后，动态添加其超链，从而能查看或下载该文件。提示：利用asp:Literal控件，this.litUp.Text = string.Format("<a href='./0'>0</a>", strFileName);15. 思考：怎么在上传图片之前，在Web浏览器中预览图片效果？16. 方法1：通过javascript动态添加IMG，并将其SRC修改为本地上传文件。添加如下脚本：<script type="text/javascript"> /如果用户选择了图片，则显示图片的预览效果 function preview() var fileX = document.getElementById("fileUp"); if(!fileX | !fileX.value) /如果没有选择上传文件 return; var suffix = /.jpg$|.jpeg$/i; if(suffix.test(fileX.value) /限定上传文件的后缀是.jpg或.jpeg var imageX = document.getElementById("imgviewer"); if(imageX) imageX.src = 'file:/' + fileX.value; imageX.style.display="block" else var imgviewer = document.createElement('img'); imgviewer.setAttribute('src','file:/'+fileX.value); imgviewer.setAttribute('width','120'); imgviewer.setAttribute('height','90'); imgviewer.setAttribute('id','imgviewer'); document.getElementById('form1').appendChild(imgviewer); setTimeout("hidden()",5000); /5秒之后隐藏图片 else alert("请选择JPG格式的图像文件。"); /隐藏照片 function hidden() var imageX = document.getElementById("imgviewer"); if(imageX) document.getElementById('imgviewer').style.display="none" </script>对应FileUpload中，增加onchange和onmouseover事件，并将其与preview脚本关联：<asp:FileUpload ID="fileUp" runat="server" onchange=" preview()"onmouseover="preview()" />编译运行后，观察其效果。理论上的效果应该是：选择了文件或用户鼠标移动上传控件是，判断其是否为jpg格式文件，如果是显示其预览效果5秒钟，然后让其消失。思考：如果不出现上述效果，如何解决？并讨论出现这一现象的原因。17. 方法2：AlphaImageLoader滤镜。用途：在对象的容器边界内，在对象背景与内容之间显示图片，并能对此图片进行剪切或改变尺寸。如果载入的是PNG（Portable Network Graphics）格式文件，则还能设置0%-100%的透明度。基本语法：filter : progid: DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL ) 其中：enabled：可选项，布尔量，用于设置或检索滤镜是否激活。 True为默认值。sizingMethod：可选项，字符串，用于设置或检索滤镜作用于对象的图片在对象容器边界内的显示方式。其中：crop表示剪切图片以适应对象尺寸，image为默认值，表示增大或减小对象的尺寸边界以适应图片的尺寸，scale表示缩放图片以适应对象的尺寸边界。src：必选项，字符串，使用绝对或相对URL地址指定图片来源，无此参数，滤镜将失效。 据此，应用AlphaImageLoader滤镜一般步骤：1）为预览区域（比如要在某个 div 中预览）添加样式：filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);2）为 AlphaImageLoader 设置 src 属性。在<head>部分添加：#newPreviewfilter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);</style><script type="text/javascript">function PreviewImg(imgFile) /原来的预览代码，不支持 IE7。 var oldPreview = document.getElementById("oldPreview"); oldPreview.innerHTML = "<img src="file:" + imgFile.value + "" width="120" height="90" />" /新的预览代码，支持 IE6、IE7。 var newPreview = document.getElementById("newPreview");newPreview.filters.item( "DXImageTransform.Microsoft.AlphaImageLoader").src = imgFile.value; newPreview.style.width = "120px" newPreview.style.height = "90px"</script>在<body>内修改，并添加两个div：<asp:FileUpload ID="fileUp" runat="server" onchange="javascript:PreviewImg(this);" /><div id="oldPreview"></div><div id="newPreview"></div>编译运行后，观察其效果。18. 思考：上述代码分别运行在IE和Opera浏览器中，会不会出现不同结果，为什么？
