基于uploadify.js实现多文件上传和上传进度条的显示 - 推酷
基于uploadify.js实现多文件上传和上传进度条的显示
uploadify是JQuery的一个插件，主要实现文件的异步上传功能，可以自定义文件大小限制、文件类型、是否自动上传等属性，可以显示上传的进度条。官网地址是/，进入官网首页(不截图了，其实也没啥看的)，可以看到uploadify的标语&Upload files like magic&，意思是说使用uploadify上传文件如魔法一般。目前一共分为两个版本，Flash版和HTML5版，不过HTML5版是收费的，如图：
这里我们下载Flash版~~
&一、简单文件上传的实现
下载完成后，解压到当前目录，可以看到如下目录：
uploadify.js是基于JQuery的，所以我们也要引入JQuery，红色圈住的使我们要使用的文件，额！JQuery是我下载放进去的，大家自己下载一个吧。
新建一个Web项目，然后把上面的文件都放到项目根目录下(这样做不好，大家自己规划目录，我就不废话了)，然后新建页面，引入JQuery、uploadify.js和uploadify.css，接下来该干些什么呢？没有头绪啊，打开刚刚的下载目录看看，有个index.php,打开看到是一个官方的Demo,那么就从这个Demo说起吧，下来看看问什么包里面没有JQuery，看图：
我们可以看到Demo中加载的是googleapis的JQuery，版本是1.7.1，然后看下面的代码：
一个form表单，里面有个input，type是file,下面来看看JS代码：
很简单，用JQuery调用了uploadify方法。其中swf和uploader指的是flas***件的地址和上传的处理程序。好，下面亲自动手来写一个试试。
既然是文件上传，我们要先有一个文件上传方法吧，新建FileUpload.ashx文件，写入以下代码：
context.Response.ContentType = &text/plain&;
if (context.Request.Files.Count & 0)
HttpPostedFile file = context.Request.Files[0];
string ext = System.IO.Path.GetExtension(file.FileName);
string fileName = DateTime.Now.Ticks +
string p = &/upload/& + fileN
string path = context.Server.MapPath(&~/upload/& + fileName);
file.SaveAs(path);
context.Response.Write(&1&);
一个简单的文件上传，有人会问文件上传成功问什么返回“1”呢？我们来看看Uploadify.php,如图：
这下清楚了吧~还有要记得我们上传的目录是upload目录，记得在项目中添加则个目录。接下来我们开始写JS，实现文件的上传，模仿官方的Demo，代码如下：
&%@ Page Language=&C#& AutoEventWireup=&true& CodeBehind=&WebForm1.aspx.cs& Inherits=&Jsonp.WebForm1& %&
&!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&
&script src=&jquery-1.11.1.min.js&&&/script&
&script src=&jquery.uploadify.js&&&/script&
&link href=&uploadify.css& rel=&stylesheet& type=&text/css& /&
&input id=&file_upload& name=&file_upload& type=&file& multiple=&true&&
&script type=&text/javascript&&
$(function () {
$(&#file_upload&).uploadify({
height: 30,
swf: 'uploadify.swf',
uploader: 'UploadFile.ashx',
width: 120
我们就是修改了uploader为我们自己的上传处理程序，然后F5运行，看看效果：
我们可以看到页面上面出现了一个按钮，点击可以打开对话框选中文件，选择一个文件，点击确定，看到文件上传成功了：
真的上传成功了吗？我们进入upload目录看看，确实上传成功了。是不是感觉很神奇？当然，我们也可以同时选则多张图片，批量上传，上传成功后，那个进度条过一段时间会一个一个自动消失。是不是突然发现文件上传竟然可以这么简单~~
&二、自定义Uploadify
文件上传是实现了，但是按钮样式和文字都不是我们想要的？下面我们来看一下如何自定义Uploadify插件，我们打开jquery.uploadify.js来看一下他的源代码：
开头的一段密密麻麻的代码是用来显示flash的，不用管她。向下走，我们看到如上图的代码，width、height、swf、uploader，没错这个就是他的自定义选项，下面是我总结的这些自定义选项的含义：
: $this.attr('id'), // The ID of the DOM object
: 'uploadify.swf',
// uploadify flas***件的路径
uploader : 'UploadFile.ashx',
// 上传文件的提交地址
// Options
// 是否自动上传文件
buttonClass
// 按钮的样式，这里可以自定css样式
buttonCursor : 'hand',
// 按钮鼠标样式
buttonImage
// 按钮图片
buttonText
: 'SELECT FILES',
// 按钮显示的文字
checkExisting
// 上传前是否先检查文件是否存在
// 是否启动调试
fileObjName
: 'Filedata',
// The name of the file object to use in your server-side script
fileSizeLimit
// 文件大小限制，格式为1KB或1MB
fileTypeDesc : 'All Files',
// 文件类型描述
fileTypeExts : '*.*',
// 文件扩展名过滤
// 按钮高度
itemTemplate : false,
// The template for the file item in the queue
// 提交方式
// 是否允许多文件上传
// An object with additional data to send to the server-side upload script with every file upload
preventCaching
// Adds a random value to the Flash URL to prevent caching of it (conflicts with existing parameters)
progressData : 'percentage',
// 进度条显示，百分比
// The ID of the DOM object to use as a file queue (without the #)
queueSizeLimit
// 文件上传队列的大小限制
removeCompleted : true,
// 上传成功后移除进度条
removeTimeout
// The delay in seconds before removing a queue item if removeCompleted is set to true
requeueErrors
// Keep errored files in the queue and keep trying to upload them
successTimeout
// The number of seconds to wait for Flash to detect the server's response after the file has finished uploading
uploadLimit
// 可以上传文件的最大数量
// 按钮宽度
// 这里是一些扩展的事件
overrideEvents
// (Array) A list of default event handlers to skip
// Triggered when a file is cancelled from the queue
onClearQueue
// Triggered during the 'clear queue' method
// Triggered when the uploadify object is destroyed
onDialogClose // Triggered when the browse dialog is closed
onDialogOpen
// Triggered when the browse dialog is opened
// Triggered when the browse button gets disabled
// Triggered when the browse button gets enabled
onFallback
// Triggered is Flash is not detected
// Triggered when Uploadify is initialized
onQueueComplete
// Triggered when all files in the queue have been uploaded
onSelectError // Triggered when an error occurs while selecting a file (file size, queue size limit, etc.)
// Triggered for each file that is selected
onSWFReady
// Triggered when the SWF button is loaded
onUploadComplete // Triggered when a file upload completes (success or error)
onUploadError // Triggered when a file upload returns an error
onUploadSuccess
// Triggered when a file is uploaded successfully
onUploadProgress // Triggered every time a file progress is updated
onUploadStart // Triggered immediately before a file upload starts
下面我们来写一个总和示例：
&%@ Page Language=&C#& AutoEventWireup=&true& CodeBehind=&WebForm1.aspx.cs& Inherits=&Jsonp.WebForm1& %&
&!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&
&script src=&jquery-1.11.1.min.js&&&/script&
&script src=&jquery.uploadify.min.js&&&/script&
&link href=&uploadify.css& rel=&stylesheet& type=&text/css& /&
&input id=&file_upload& name=&file_upload& type=&file& multiple=&true&&
&input type=&button& value=&上传& onclick=&javascript:$('#file_upload').uploadify('upload','*')& /&
&div id=&imgBox& style=& overflow: width:200 height:200 &&&/div&
&script type=&text/javascript&&
$(function () {
$(&#file_upload&).uploadify({
auto: false,
fileTypeDesc: 'Image Files',
fileTypeExts: '*. *.*.*.*',
height: 30,
buttonText: '请选择图片...',
swf: 'uploadify.swf',
uploader: 'UploadFile.ashx',
width: 120,
fileSizeLimit: '4MB',
onUploadSuccess: function (file, data, response) {
$(&#imgBox&).html(data);
onUploadError: function (file, errorCode, errorMsg, errorString) {
alert('The file ' + file.name + ' could not be uploaded: ' + errorString);
功能就是上传图片，上传成功后，显示上传的图片。 注意这里自动上传为false，也就是说不自动上传图片，我们给按钮添加了click事件，来实现手动上传 ，代码如下：
$('#file_upload').uploadify('upload','*')
注意uploadify后面的参数,'*',这个参数代表上传所有文件，如果没有这个参数的话，只会上传第一张图片。
这个时候，上传文件的处理方法如下：
context.Response.ContentType = &text/plain&;
if (context.Request.Files.Count & 0)
HttpPostedFile file = context.Request.Files[0];
string ext = System.IO.Path.GetExtension(file.FileName);
string fileName = DateTime.Now.Ticks +
string p = &/upload/& + fileN
string path = context.Server.MapPath(&~/upload/& + fileName);
file.SaveAs(path);
context.Response.Write(&&img width=\&100px\& height=\&100px\& src=\&& + p + &\& /&&);
context.Response.Write(&上传错误！&);
作者：?霏霏
QQ交流群：
博客地址：/yunfeifei/
声明：本博客原创文字只代表本人工作中在某一时间内总结的观点或结论，与本人所在单位没有直接利益关系。非商业，未授权，贴子请以现状保留，转载时必须保留此段声明，且在文章页面明显位置给出原文连接。
如果大家感觉我的博文对大家有帮助，请推荐支持一把，给我写作的动力。
已发表评论数()
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
标题不准确
排版有问题
主题不准确
没有分页内容
图片无法显示
视频无法显示
与原文不一致游戏加载中，先看07秒广告吧
传奇进度条2
13457 玩过
这个游戏玩过，不过说真的，真心觉得没啥意思
这个游戏玩过，不过说真的，真心觉得没啥意思
我先不说游戏性，这他妈下载不来啊
我先不说游戏性，这他妈下载不来啊
又一个辣鸡
又一个辣鸡
以经典的传奇为蓝本，不一样的玩法。三职业同时出战，小极品不断。支持离线挂机，手机不耗电。每天点击几次，也可以享受游戏乐趣。战力排行榜，比一比谁最牛。
以经典的传奇为蓝本，不一样的玩法。三职业同时出战，小极品不断。支持离线挂机，手机不耗电。每天点击几次，也可以享受游戏乐趣。战力排行榜，比一比谁最牛。
链接都挂了不知道多久了竟然还能顶上来……
链接都挂了不知道多久了竟然还能顶上来……
这货 进地图还有要求。也不书面
这货 进地图还有要求。也不书面
有没IOS版本？
有没IOS版本？
U77是我碰到的最有良心的小游戏站点，游戏不多但是可以说每款游戏都是精品，而且有着良心的汉化团队，这是一个很有梦想的团队，无所谓利益，所做的一切都是为了玩家更好的游戏体验，希望这样的团队能越做越大，越做越好。
U77是我碰到的最有良心的小游戏站点，游戏不多但是可以说每款游戏都是精品，而且有着良心的汉化团队，这是一个很有梦想的团队，无所谓利益，所做的一切都是为了玩家更好的游戏体验，希望这样的团队能越做越大，越做越好。
这里说句真心话也许U77不像4399那样是国内最大flash游戏站点也不像mhhf（灵动）那样是最早（曾经也是最大）的原创游戏站点更不像17YY那样是国内最大无敌版游戏站点但是我在U77看到国内最好的汉化团队（感谢乐译，即使你们的效率略低），我看到了他们努力（jump）的心@U77斯巴达 （＠不到
这里说句真心话也许U77不像4399那样是国内最大flash游戏站点也不像mhhf（灵动）那样是最早（曾经也是最大）的原创游戏站点更不像17YY那样是国内最大无敌版游戏站点但是我在U77看到国内最好的汉化团队（感谢乐译，即使你们的效率略低），我看到了他们努力（jump）的心 （＠不到乐译的人- -||蛋疼只能＠你了）我也看到了 （这次是真的要＠你）在不断努力的去尝试做好U77的心尤其是当我看到了4399只求更多的游戏看到了灵动放弃了原创看到了17yy的无脑破解我确定了一点 U77我不会放弃的。这是我最爱的flash站点
这个游戏需要赞助，最好是110块无限传送，不然没法玩。但是打开支付宝的时候，感觉不太对。
这个游戏需要赞助，最好是110块无限传送，不然没法玩。但是打开支付宝的时候，感觉不太对。
下下来玩了一下，不充钱就只能帮他推广才能玩。。。。玩的请慎重
下下来玩了一下，不充钱就只能帮他推广才能玩。。。。玩的请慎重
可惜给不了0分啊，不然就给了。而且U77机制也有锅……刷分太严重了，无限注册小号使劲把这些没人玩的垃圾刷上来恶心人眼球，有意思吗？不讨喜就是不讨喜，非原创就是非原创，自欺欺人有什么意义。说实话，那个达尔迷棋虽然刷分刷分刷的有些恶心以外，至少比这种“原创”“传奇”游戏好太多了
可惜给不了0分啊，不然就给了。而且U77机制也有锅……刷分太严重了，无限注册小号使劲把这些没人玩的垃圾刷上来恶心人眼球，有意思吗？不讨喜就是不讨喜，非原创就是非原创，自欺欺人有什么意义。说实话，那个达尔迷棋虽然刷分刷分刷的有些恶心以外，至少比这种“原创”“传奇”游戏好太多了
不知道大家有没发现，在这里只要涉及到游戏内坑钱的，一般评分都很低通过在U77 PC游戏版块的评分很低的 所谓的“原......创”游戏我终于明白了一个道理：在这里的所谓
“原创”=把别人的大部分游戏内容拿来用+自己添加的坑钱内容+脸皮厚度（打死都不承认是抄袭）想免费拿别人的版权所有物来赚钱是要承
不知道大家有没发现，在这里只要涉及到游戏内坑钱的，一般评分都很低通过在U77 PC游戏版块的评分很低的 所谓的“原......创”游戏我终于明白了一个道理：在这里的所谓
“原创”=把别人的大部分游戏内容拿来用+自己添加的坑钱内容+脸皮厚度（打死都不承认是抄袭）想免费拿别人的版权所有物来赚钱是要承担后果的，就像前一阵子的那个制作什么刀塔传奇的公司也是口口声声说自己的游戏是原创的，然后呢，现在已经被暴雪公司搞的爽歪歪的了说这些并不是想打击游戏制作者的积极性，只是想劝劝，想拿这种东西来赚钱，只有2种可能性，结果都一样如果失败了，那就没戏了（这种模式注定没戏，评分一目了然）如果成功了，也是没戏，版权所有人会放过你？只是死的更惨而已制作一款游戏确实不容易，通过自己真真正正的原创，能赚到钱，证明有实力 赚钱心安理得没付钱就想免费拿别人的东西来赚钱，更有甚者还美其名曰：原创
不知道这到底是自欺欺人呢，还是自欺欺人呢，还是自欺欺人。只能仁者见仁，智者见智了
我已经删除了
我已经删除了
强制要分享，想宣传都不是这样手法吧，非常反感
强制要分享，想宣传都不是这样手法吧，非常反感
确实只能呵呵！传送用完必须分享才给，没得卖！
确实只能呵呵！传送用完必须分享才给，没得卖！
传奇我还是蛮喜欢的。。。。。。这游戏不好说
传奇我还是蛮喜欢的。。。。。。这游戏不好说
这种游戏的作者只能对其呵呵了
这种游戏的作者只能对其呵呵了
VIP地狱加爆率，这。。
VIP地狱加爆率，这。。
还有其他问题或建议,请致
传奇进度条2的标签
选择添加新的标签
增值电信业务经营许可证苏B2-
苏公网安备 3901号
苏ICP备号-5
常州永继（YOEKEY）网络科技有限公司 Copyright