jQuery无刷新上传之uploadify3.1简单使用

网络编程 2024/5/19 佚名

3 2 1

昨天在网上找到了一个叫做uploadify的jquery上传插件，看到有几篇文章也是介绍这个插件的，心想何不用这个试试。

不过网上的这几篇文章用到的uploadify还是以前的旧版本uploadify-v2.1.0，我在官网上下载的是uploadify-v3.1版，其中的一些参数以及调用方法也不同了，还好官网有帮助文档。

（唯一感觉不爽的一点就是这个开发包是针对php的，官网并没有.NET版本，但至少原理都是一样的，简单的修改一下就可以了。还是那句话“不仅要知其然，还要知其所以然”，知其所以然了，一切都是浮云啊）

好了，废话不多说。先上个效果图，有图有真相：

一：从官网下载开发包添加到项目中，我对这个开发包做了一个精简，删去了那些php方面的文件：

项目基本结构：

二：添加对css和js文件的引用：

注意jquery.js文件和uploadify.js文件的调用顺序。

三：Default.aspx页面的代码如下：

<head runat="server">
 <title></title>
 <link href="js/uploadify/uploadify.css" rel="stylesheet" type="text/css" />
 <script src="/UploadFiles/2021-04-02/jquery-1.4.1-vsdoc.js">

四：一般处理程序UploadHandler.ashx简单代码如下：


public void ProcessRequest(HttpContext context)
{
 context.Response.ContentType = "text/plain";
 //http://www.cnblogs.com/babycool/
 //接收上传后的文件
 HttpPostedFile file = context.Request.Files["Filedata"];
 //其他参数
 //string somekey = context.Request["someKey"];
 //string other = context.Request["someOtherKey"];
 //获取文件的保存路径
 string uploadPath =
  HttpContext.Current.Server.MapPath("UploadImages" + "\\");
 //判断上传的文件是否为空
 if (file != null)
 {
  if (!Directory.Exists(uploadPath))
  {
   Directory.CreateDirectory(uploadPath);
  }
  //保存文件
  file.SaveAs(uploadPath + file.FileName);
  context.Response.Write("1");
 }
 else
 {
  context.Response.Write("0");
 } 

}

public bool IsReusable
{
 get
 {
  return false;
 }
}




五：用到的参数介绍：
通过查看jquery.uploadify-3.1.js中的默认设置并参考官方文档可得知：

参数不重新指定则保持默认：
swf：uploadify.swf 文件的相对路径
uploader：后台处理程序的相对路径
buttonText：按钮显示的文字
上传文件的类型默认为所有文件  'All Files'    '*.*'
可以通过以下两参数指定，指定方法见步骤三中的代码：
fileTypeDesc；fileTypeExts；
auto：为true表示选择文件后自动上传；如果不想自动上传，需设定为false，并通过




<a href="javascript:$('#uploadify').uploadify('upload')">上传</a>| 
<a href="javascript:$('#uploadify').uploadify('cancel')">取消上传</a>


来指定是上传还是取消上传；
multi：设置为true将允许多文件上传；
method： 提交方式Post 或Get 默认为Post；
queueSizeLimit：当允许多文件上传时，设置选择文件的个数，默认值为999 ；
另外，取消上传图片的路径是设置在css文件中的；
其他更多设置可以参考官网的帮助文档。
六：将上传完成后显示的Complete显示为中文
一位网友提出“

英文的Complete不能改成中文”，这可能是之前的版本不能进行修改。我通过查看源代码 jquery.uploadify-3.1.js找到了上传完成时显示的内容：
 
再参考官方的帮助文档，可以得知，在“

onUploadSuccess” 事件中可以设置上传完成后所执行的代码，则修改后的代码为：



//选择文件后自动上传
'auto': true,
//设置为true将允许多文件上传
'multi': true,
//上传成功后执行
'onUploadSuccess': function (file, data, response) {
 $('#' + file.id).find('.data').html(' 上传完毕');
} 


还有一个需要注意的一点是：一般在设定了选择上传文件路径时比如只允许上传*.jpg;*.png;*.gif格式的图片文件，则除了指定fileTypeDesc；fileTypeExts；两个参数外，还要在服务器端即一般处理程序中再次对上传文件的文件扩展名进行判断，以防一些用户跳过客户端验证上传恶意文件。
下面附上我在博客园找到的那两篇介绍uploadify的文章链接，供大家参考：
Jquery uploadify上传插件使用详解 
jQuery插件uploadify实现ajax效果的图片上传  
并附上uploadify的官方网站 
我整理的开发包：整理uploadify-v3.1.NET开发包
当然，这仅仅是一个简单的试用，具体用到项目中还要考虑很多方面的问题。
欢迎各位大神多多指教，如果该文章对你有帮助大家可以一起讨论讨论。
以上就是本文的全部内容，希望能给大家一个参考，也希望大家多多支持。

jQuery,上传,uploadify3.1,.NET开发包

标签：

jQuery,上传,uploadify3.1,.NET开发包

免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

评论“jQuery无刷新上传之uploadify3.1简单使用”

jQuery无刷新上传之uploadify3.1简单使用

暂无“jQuery无刷新上传之uploadify3.1简单使用”评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新动态

20240519

jQuery无刷新上传之uploadify3.1简单使用

jQuery,上传,uploadify3.1,.NET开发包

Javascript中prototype的使用详解

jQuery插件uploadify实现ajax效果的图片上传

评论“jQuery无刷新上传之uploadify3.1简单使用”

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新动态

友情链接