本人也是刚刚接触这个上传控件，因为客户提出的要求，所以看了一下。今天实验成功。
在研究的过程中、本人遇到了兼容性的问题和大小的限制。就是放在IE6浏览器中，上传按钮不显示。网上有很多的这样问题。 今天把代码贴出来。
upload.aspx
1 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="upload.aspx.cs" Inherits="tab_upload" %> 2 3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 4 <html xmlns="http://www.w3.org/1999/xhtml"> 5 <head runat="server"> 6 <title>图片上传</title> 7 <meta http-equiv="X-UA-Compatible" content="IE=6" /> 8 <meta http-equiv="X-UA-Compatible" content="IE=7" /> 9 <meta http-equiv="X-UA-Compatible" content="IE=8" /> 10 <link href="JS/uploadify/uploadify.css" rel="stylesheet" type="text/css" /> 11 <script type="text/javascript" src="JS/uploadify/jquery-1.4.2.min.js"></script> 12 <script type="text/javascript" src="JS/uploadify/swfobject.js"></script> 13 <script type="text/javascript" src="JS/uploadify/jquery.uploadify.v2.1.4.min.js"></script> 14 <script src="Js/uploadify/jquery.uploadify.v2.0.3.js" type="text/javascript"></script> 15 <script type="text/javascript"> 16 $(document).ready(function () { 17 $("#uploadify").uploadify({ 18 'uploader': 'JS/uploadify/uploadify.swf?var='+(new Date()).getTime(),// 19 'script': 'UploadHandler.ashx?var='+(new Date()).getTime(), 20 'cancelImg': 'JS/uploadify/cancel.png', 21 'buttonText': '上传附件', //上传按钮的文字 22 'multi': true, //是否多文件上传 23 'folder': 'UploadFile', 24 'displayData': 'speed',//进度条的显示方式 25 'buttonImg': '../images/tianjia.gif', //替换上传钮扣 26 'width': 168, //buttonImg的大小 27 'height': 35, // 28 'queueID': 'fileQueue', 29 'method': 'post', //方法，服务端可以用$_POST数组获取数据 30 'auto': false, 31 'onComplete': function(event, queueID, fileObj, response, data) { 32 $(this).each(function(i) { 33 var src = "UploadFile\/" + $("#sel_type").val() + "\/" + response; 34 $("#dv_img_show").append("<div style=\" text-align:center;border:1px solid #CCC\"><img src=" + src + " id=\"img\"" + i + " οnlοad=\"resizeimg(this,100020,100020);DrawImage(this,100050,100050)\" ></img></div>"); 35 }); 36 }, 37 'onError': function(event, queueID, fileObj) { 38 alert("文件:" + fileObj.name + " 上传失败，文件太大"); 39 }, //================== 40 'onQueueFull': function (event, queueSizeLimit) { 41 alert("一次只能上传 5 张图片"); 42 return false; 43 }, 44 'onComplete': function (event, queueID, fileObj, response, data) { //上传完成后的操作 45 alert(response); 46 }, 47 'sizeLimit': 10737418240, 48 'onSelect': function(event, queueID, fileObj) { 49 } 50 }); 51 }); 52 </script> 53 </head> 54 <body> 55 <form id="form1" runat="server"> 56 <div style="position: absolute; left: 360px; top: 50px;"> 57 <div id="fileQueue"> 58 </div> 59 <input type="file" name="uploadify" id="uploadify" /> 60 <p> 61 <a href="javascript:$('#uploadify').uploadifyUpload()"> 62 <image id="img" src="images/shanchuan.gif" border="0" /> <!--上传按钮图片的路径--> 63 </a> <a href="javascript:$('#uploadify').uploadifyClearQueue()"> 64 <image id="img1" src="images/cancel.jpg" border="0" /><!--取消上传按钮图片的路径--> 65 </a> 66 <asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="images/fanhui.jpg" OnClick="ImageButton1_Click" /> 67 </p> 68 </div> 69 </form> 70 </body> 71 </html>
UploadHandler.ashx 中处理文件：
1 <%@ WebHandler Language="C#" class="UploadHandler" %> 2 3 using System; 4 using System.Web; 5 using DAL; 6 using System.IO; 7 using System.Web.SessionState; 8 using DAL; 9 10 public class UploadHandler : IHttpHandler, IReadOnlySessionState 11 { 12 upLoad_DAL dal_up = new upLoad_DAL(); 13 public void ProcessRequest(HttpContext context) 14 { 15 context.Response.ContentType = "text/plain"; 16 context.Response.Charset = "utf-8"; 17 if (context.Session["id"] != null) 18 { 19 string strID = context.Session["id"].ToString(); 20 string str_user = context.Session["zs_user"].ToString(); 21 string str_name = context.Session["name"].ToString(); 22 string str_Time = System.DateTime.Now.ToString(); 23 HttpPostedFile file = context.Request.Files["Filedata"]; 24 string uploadPath = HttpContext.Current.Server.MapPath(@context.Request["folder"]) + "\\"; 25 26 if (file != null) 27 { 28 if (!Directory.Exists(uploadPath)) 29 { 30 Directory.CreateDirectory(uploadPath); 31 } 32 33 //下面这句代码缺少的话，上传成功后上传队列的显示不会自动消失 34 string randomStr = DateTime.Now.ToFileTime().ToString();//当前时间生成的文件名字 35 string imagename = string.IsNullOrEmpty(file.FileName.Trim()) ? "" : randomStr + System.IO.Path.GetExtension(file.FileName);//图片重新命名了下 36 file.SaveAs(uploadPath + imagename); 37 string strUrl = "UploadFile/" + imagename; 38 dal_up.Add_LiXiang(str_name, strUrl, strID, str_user, str_Time);//路径插入到数据库，下次图片显示就直接读取路径了。 39 context.Response.Write("上传成功"); 40 } 41 else 42 { 43 context.Response.Write("请选择上传文件"); 44 } 45 } 46 else 47 { 48 context.Response.Write("0"); 49 } 50 } 51 52 public bool IsReusable 53 { 54 get 55 { 56 return false; 57 } 58 } 59 60 }
在web.config中加入
<httpRuntime maxRequestLength="2048576" executionTimeout="110" appRequestQueueLimit="100" requestValidationMode="2.0" />
控制上传文件的大小，文件上传大小是取我们设置的'sizeLimit': 10737418240和web.config中的较小的值的。（这是限制最大上传文件的大小）
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属性后才有效，用来设置选择文件对话框中的提示文本
sizeLimit ：上传文件的大小限制 。
simUploadLimit ：允许同时上传的个数 默认值：1 。
buttonText ：浏览按钮的文本，默认值：BROWSE 。
buttonImg ：浏览按钮的图片的路径 。
hideButton ：设置为true则隐藏浏览按钮的图片 。
rollover ：值为true和false，设置为true时当鼠标移到浏览按钮上时有反转效果。
width ：设置浏览按钮的宽度 ，默认值：110。
height ：设置浏览按钮的高度 ，默认值：30。
wmode ：设置该项为transparent 可以使浏览按钮的flash背景文件透明，并且flash文件会被置为页面的最高层。 默认值：opaque 。
cancelImg：选择文件到文件队列中后的每一个文件上的关闭按钮图标
上面介绍的key值的value都为字符串或是布尔类型，比较简单，接下来要介绍的key值的value为一个函数，可以在选择文件、出错或其他一些操作的时候返回一些信息给用户。
onInit :做一些初始化的工作。
onSelect ：选择文件时触发，该函数有三个参数
event:事件对象。
queueID：文件的唯一标识，由6为随机字符组成。
fileObj：选择的文件对象，有name、size、creationDate、modificationDate、type 5个属性。
onSelectOnce：在单文件或多文件上传时，选择文件时触发。该函数有两个参数event，data，data对象有以下几个属性：
-
fileCount：选择文件的总数。
-
filesSelected：同时选择文件的个数，如果一次选择了3个文件该属性值为3。
-
filesReplaced：如果文件队列中已经存在A和B两个文件，再次选择文件时又选择了A和B，该属性值为2。
-
allBytesTotal：所有选择的文件的总大小。
onCancel :当点击文件队列中文件的关闭按钮或点击取消上传时触发。该函数有event、queueId、fileObj、data四个参数，前三个参数同onSelect中的三个参数，data对象有两个属性fileCount和allBytesTotal。
-
fileCount：取消一个文件后，文件队列中剩余文件的个数。
-
allBytesTotal：取消一个文件后，文件队列中剩余文件的大小。
onClearQueue：当调用函数fileUploadClearQueue时触发。有event和data两个参数，同onCancel 中的两个对应参数。
onQueueFull ：当设置了queueSizeLimit并且选择的文件个数超出了queueSizeLimit的值时触发。该函数有两个参数event和queueSizeLimit。
onError ：当上传过程中发生错误时触发。该函数有event、queueId、fileObj、errorObj四个参数，其中前三个参数同上，errorObj对象有type和info两个属性。
-
type：错误的类型，有三种‘HTTP’, ‘IO’, or ‘Security’
-
info：错误的描述
onOpen ：点击上传时触发，如果auto设置为true则是选择文件时触发，如果有多个文件上传则遍历整个文件队列。该函数有event、queueId、fileObj三个参数，参数的解释同上。
onProgress：点击上传时触发，如果auto设置为true则是选择文件时触发，如果有多个文件上传则遍历整个文件队列，在onOpen之后触发。该函数有event、queueId、fileObj、data四个参数，前三个参数的解释同上。data对象有四个属性percentage、bytesLoaded、allBytesLoaded、speed：
-
percentage：当前完成的百分比
-
bytesLoaded：当前上传的大小
-
allBytesLoaded：文件队列中已经上传完的大小
-
speed：上传速率 kb/s
onComplete：文件上传完成后触发。该函数有四个参数event、queueId、fileObj、response、data五个参数，前三个参数同上。response为后台处理程序返回的值，在上面的例子中为1或0，data有两个属性fileCount和speed
-
fileCount：剩余没有上传完成的文件的个数。
-
speed：文件上传的平均速率 kb/s
注：fileObj对象和上面讲到的有些不太一样，onComplete 的fileObj对象有个filePath属性可以取出上传文件的路径。
onAllComplete：文件队列中所有的文件上传完成后触发。该函数有event和data两个参数，data有四个属性，分别为：
-
filesUploaded :上传的所有文件个数。
-
errors ：出现错误的个数。
-
allBytesLoaded ：所有上传文件的总大小。
-
speed ：平均上传速率 kb/s
相关函数介绍
在上面的例子中已经用了uploadifyUpload和uploadifyClearQueue两个函数，除此之外还有几个函数：
uploadifySettings：可以动态修改上面介绍的那些key值，如下面代码
如果上传按钮的事件写成下面这样，文件将会上传到uploadifySettings定义的目录中
uploadifyCancel：该函数接受一个queueID作为参数，可以取消文件队列中指定queueID的文件。
扫一扫
5072
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
