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


Posted in Javascript onJune 18, 2016

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

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

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

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

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

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

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

项目基本结构:

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

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

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

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

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

<head runat="server">
 <title></title>
 <link href="js/uploadify/uploadify.css" rel="stylesheet" type="text/css" />
 <script src="js/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
 <script src="js/uploadify/jquery.uploadify-3.1.js" type="text/javascript"></script>
 <script type="text/javascript">
  $(function () {
   $("#uploadify").uploadify({
    //指定swf文件
    'swf': 'js/uploadify/uploadify.swf',
    //后台处理的页面
    'uploader': 'UploadHandler.ashx',
    //按钮显示的文字
    'buttonText': '上传图片',
    //显示的高度和宽度,默认 height 30;width 120
    //'height': 15,
    //'width': 80,
    //上传文件的类型 默认为所有文件 'All Files' ; '*.*'
    //在浏览窗口底部的文件类型下拉菜单中显示的文本
    'fileTypeDesc': 'Image Files',
    //允许上传的文件后缀
    'fileTypeExts': '*.gif; *.jpg; *.png',
    //发送给后台的其他参数通过formData指定
    //'formData': { 'someKey': 'someValue', 'someOtherKey': 1 },
    //上传文件页面中,你想要用来作为文件队列的元素的id, 默认为false 自动生成, 不带#
    //'queueID': 'fileQueue',
    //选择文件后自动上传
    'auto': true,
    //设置为true将允许多文件上传
    'multi': true
   });
  });
 
 </script>
</head>
<body>
 <div>
  <%--用来作为文件队列区域--%>
  <div id="fileQueue">
  </div>
  <input type="file" name="uploadify" id="uploadify" />
  <p>
   <a href="javascript:$('#uploadify').uploadify('upload')">上传</a>| 
   <a href="javascript:$('#uploadify').uploadify('cancel')">取消上传</a>
  </p>
 </div>
</body>
</html>

四:一般处理程序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中的默认设置并参考官方文档可得知:

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

参数不重新指定则保持默认:

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找到了上传完成时显示的内容:

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

再参考官方的帮助文档,可以得知,在“
onUploadSuccess” 事件中可以设置上传完成后所执行的代码,则修改后的代码为:

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

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

还有一个需要注意的一点是:一般在设定了选择上传文件路径时比如只允许上传*.jpg;*.png;*.gif格式的图片文件,则除了指定fileTypeDesc;fileTypeExts;两个参数外,还要在服务器端即一般处理程序中再次对上传文件的文件扩展名进行判断,以防一些用户跳过客户端验证上传恶意文件。

下面附上我在博客园找到的那两篇介绍uploadify的文章链接,供大家参考:

并附上uploadify的官方网站

我整理的开发包:整理uploadify-v3.1.NET开发包

当然,这仅仅是一个简单的试用,具体用到项目中还要考虑很多方面的问题。

欢迎各位大神多多指教,如果该文章对你有帮助大家可以一起讨论讨论。

以上就是本文的全部内容,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
优化 JavaScript 代码的方法小结
Jul 16 Javascript
Javascript 面向对象 重载
May 13 Javascript
ExtJS 设置级联菜单的默认值
Jun 13 Javascript
javascript开发随笔二 动态加载js和文件
Nov 25 Javascript
从数据结构的角度分析 for each in 比 for in 快的多
Jul 07 Javascript
鼠标移入移出事件改变图片的分辨率的两种方法
Dec 17 Javascript
js与C#进行时间戳转换
Nov 14 Javascript
分享20个提升网站界面体验的jQuery插件
Dec 15 Javascript
javascript实现支持移动设备画廊
Aug 24 Javascript
javascript适合移动端的日期时间拾取器
Nov 10 Javascript
浅谈EasyUi ComBotree树修改 父节点选择的问题
Nov 07 Javascript
pace.js和NProgress.js两个加载进度插件的一点小总结
Jan 31 Javascript
jQuery插件uploadify实现ajax效果的图片上传
Jun 18 #Javascript
JavaScript的this关键字的理解
Jun 18 #Javascript
jquery+ajax实现直接提交表单实例分析
Jun 17 #Javascript
jQuery UI Bootstrap是什么?
Jun 17 #Javascript
JS模拟bootstrap下拉菜单效果实例
Jun 17 #Javascript
JavaScript获取当前url根目录(路径)
Jun 17 #Javascript
下一代Bootstrap的5个特点 超酷炫!
Jun 17 #Javascript
You might like
天津市收音机工业发展史
2021/03/04 无线电
PHP查询MySQL大量数据的时候内存占用分析
2011/07/22 PHP
php实现博客,论坛图片防盗链的方法
2016/10/15 PHP
Yii2处理密码加密及验证的方法
2019/05/12 PHP
Jquery 动态添加按钮实现代码
2010/05/06 Javascript
js实现日历可获得指定日期周数及星期几示例分享(js获取星期几)
2014/03/14 Javascript
判断日期是否能跨月查询的js代码
2014/07/25 Javascript
node.js中的fs.open方法使用说明
2014/12/17 Javascript
JS实现超简洁网页title标题跑动闪烁提示效果代码
2015/10/23 Javascript
JavaScript必知必会(五) eval 的使用
2016/06/08 Javascript
JavaScript实现刷新不重记的倒计时
2016/08/10 Javascript
js获取浏览器高度 窗口高度 元素尺寸 偏移属性的方法
2016/11/21 Javascript
jQuery实现ToolTip元素定位显示功能示例
2016/11/23 Javascript
JS实现颜色梯度与渐变效果完整实例
2016/12/30 Javascript
轻松理解JavaScript之AJAX
2017/03/15 Javascript
深入理解JavaScript 参数按值传递
2017/05/24 Javascript
react native仿微信PopupWindow效果的实例代码
2017/08/07 Javascript
jQuery实现的简单日历组件定义与用法示例
2018/12/24 jQuery
微信小程序之 catalog 切换实现解析
2019/09/12 Javascript
vue 解决addRoutes多次添加路由重复的操作
2020/08/04 Javascript
js绘制一条直线并旋转45度
2020/08/21 Javascript
[01:10]DOTA2次级职业联赛 - Fly战队宣传片
2014/12/01 DOTA
Python实现的最近最少使用算法
2015/07/10 Python
Python中字符串格式化str.format的详细介绍
2017/02/17 Python
python MySQLdb使用教程详解
2018/03/20 Python
Python实现扣除个人税后的工资计算器示例
2018/03/26 Python
对matplotlib改变colorbar位置和方向的方法详解
2018/12/13 Python
Python 通过调用接口获取公交信息的实例
2018/12/17 Python
NumPy中的维度Axis详解
2019/11/26 Python
印尼综合在线预订网站:Tiket.com(机票、酒店、火车、租车和娱乐)
2018/10/11 全球购物
优秀员工获奖感言
2014/03/01 职场文书
保密承诺书范文
2014/03/27 职场文书
公司会议策划方案
2014/05/17 职场文书
民间个人借款协议书
2014/09/30 职场文书
民主评议党员自我鉴定
2014/10/21 职场文书
2016年村干部公开承诺书(公开承诺事项)
2016/03/25 职场文书