程序员在开发网站的过程中,难免会遇到些文件需要上传到服务器上面去。因此,就会借助一些扩展控件。
下面就为大家介绍一个上传文件的好用控件--UploadFile
1、创建一个测试网站,取名叫:UploadDemo
2、添加UploadFile控件所需要的文件
3、添加一个名叫UploadHandler.ashx 的一般处理文件
建好后的网站结构如下:
接下来,我们就要在Default.aspx页面添加代码了,写之前,需要添加UploadFile 用到的css 文件和js文件,Default.aspx 文件的完整代码如下:
- <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="UploadDemo._Default" %>
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml" >
- <head runat="server">
- <title></title>
- <link href="uploadify/example/css/default.css" rel="stylesheet" type="text/css" />
- <link href="uploadify/uploadify.css" rel="stylesheet" type="text/css" />
- <script src="uploadify/jquery-1.3.2.min.js" type="text/javascript"></script>
- <script src="uploadify/jquery.uploadify.v2.1.0.min.js" type="text/javascript"></script>
- <script src="uploadify/swfobject.js" type="text/javascript"></script>
- <script type="text/javascript">
- $(document).ready(function() {
- $("#uploadify").uploadify({
- 'uploader': 'uploadify/uploadify.swf',
- 'script': 'UploadHandler.ashx',
- 'cancelImg': 'uploadify/cancel.png',
- 'folder': 'UploadFile',
- 'queueID': 'fileQueue',
- 'sizeLimit': 2048000000,
- 'buttonText':'浏览...',
- 'auto': false,
- 'multi': true
- });
- });
- </script>
- </head>
- <body>
- <form id="form1" runat="server">
- <div id="fileQueue"></div>
- <input type="file" name="uploadify" id="uploadify" />
- <p>
- <a href="javascript:$('#uploadify').uploadifyUpload()">上传</a>|
- <a href="javascript:$('#uploadify').uploadifyClearQueue()">取消上传</a>
- </p>
- </form>
- </body>
- </html>
然后,我们就需要写一般处理文件中的代码了,代码的功能就是做上传处理,详细代码如下:
- public void Proce***equest(HttpContext context)
- {
- context.Response.ContentType = "text/plain";
- context.Response.Charset = "utf-8";
- HttpPostedFile file = context.Request.Files["Filedata"];
- string uploadPath =
- HttpContext.Current.Server.MapPath(@context.Request["folder"]) + "\\";
- if (file != null)
- {
- if (!Directory.Exists(uploadPath))
- {
- Directory.CreateDirectory(uploadPath);
- }
- file.SaveAs(uploadPath + file.FileName);
- //下面这句代码缺少的话,上传成功后上传队列的显示不会自动消失
- context.Response.Write("1");
- }
- else
- {
- context.Response.Write("0");
- }
- }
最终运行的效果如下:
说到这里,还需要强调一下的是,现在如果需要上传文件大于4M的话,那就需要在Web.config文件中加一句话,否则,上传的时候就会报错,同样,我还是把代码贴出来
接下来,需要说明一些参数的意思以及如何使用:
uploader : uploadify.swf 文件的相对路径,该swf文件是一个带有文字BROWSE的按钮,点击后淡出打开文件对话框,默认值:uploadify.swf。
script : 后台处理程序的相对路径 。默认值:uploadify.php
checkScript :用来判断上传选择的文件在服务器是否存在的后台处理程序的相对路径
fileDataName :设置一个名字,在服务器处理程序中根据该名字来取上传文件的数据。默认为Filedata
method : 提交方式Post 或Get 默认为Post
scriptAccess :flash脚本文件的访问模式,如果在本地测试设置为always,默认值:sameDomain
folder : 上传文件存放的目录 。
queueID : 文件队列的ID,该ID与存放文件队列的div的ID一致。
queueSizeLimit : 当允许多文件生成时,设置选择文件的个数,默认值:999 。
multi : 设置为true时可以上传多个文件。
auto : 设置为true当选择文件后就直接上传了,为false需要点击上传按钮才上传 。
fileDesc : 这个属性值必须设置fileExt属性后才有效,用来设置选择文件对话框中的提示文本,如设置fileDesc为“请选择rar doc pdf文件”,打开文件选择框效果如下图:
fileExt : 设置可以选择的文件的类型,格式如:'*.doc;*.pdf;*.rar' 。
sizeLimit : 上传文件的大小限制 。
simUploadLimit : 允许同时上传的个数 默认值:1 。
buttonText : 浏览按钮的文本,默认值:BROWSE 。
buttonImg : 浏览按钮的图片的路径 。
hideButton : 设置为true则隐藏浏览按钮的图片 。
rollover : 值为true和false,设置为true时当鼠标移到浏览按钮上时有反转效果。
width : 设置浏览按钮的宽度 ,默认值:110。
height : 设置浏览按钮的高度 ,默认值:30。
wmode : 设置该项为transparent 可以使浏览按钮的flash背景文件透明,并且flash文件会被置为页面的最高层。 默认值:opaque 。
cancelImg :选择文件到文件队列中后的每一个文件上的关闭按钮图标,如下图:
最后,还需要解决一个很重要的问题,那就是按钮的中文显示问题,依照上面的方式做出来的,如果给按钮设置显示文字为中文,那么,会遇到出现乱码问题。因此,博主考虑到了,提供的解决办法如下:
既然知道乱码是编码解码的原因,最好的解决方法当然是更改编码解码方式了。encodeURI() 方法,可以把URI字符串采用UTF-8编码格式转化成escape格式的字符串,而且咱们的中文也属于UTF-8字符集里面的,再用decodeURI()进行解码。具体修改代码如下:
A. jquery.uploadify.js 中的
if(settings.buttonText) data.buttonText = escape(settings.buttonText);
改为:
if (settings.buttonText) data.buttonText = encodeURI(settings.buttonText);
B. uploadify.fla中的
browseBtn.empty.buttonText.text = unescape(param.buttonText);
改为:browseBtn.empty.buttonText.text = decodeURI(param.buttonText);
不过本人还是比较喜欢第一种,第二种方式的话,图片加载起来会比较缓慢;好 了!现在基本上已经完成了!去享受自己的劳动成果吧!!!!!!!!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。