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 radio 联动效果
Mar 04 Javascript
ajax更新数据后,jquery、jq失效问题
Mar 16 Javascript
javascript图像处理—仿射变换深度理解
Jan 16 Javascript
判断输入是否为空,获得输入类型的JS代码
Oct 30 Javascript
JavaScript中pop()方法的使用教程
Jun 09 Javascript
基于angular中的重要指令详解($eval,$parse和$compile)
Oct 21 Javascript
vuejs实现递归树型菜单组件
Jan 13 Javascript
p5.js实现斐波那契螺旋的示例代码
Mar 22 Javascript
小程序getLocation需要在app.json中声明permission字段
Apr 04 Javascript
JavaScript实现图片的放大缩小及拖拽功能示例
May 14 Javascript
layui表格数据重载
Jul 27 Javascript
vue实现商城秒杀倒计时功能
Dec 12 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
删除PHP数组中头部、尾部、任意元素的实现代码
2017/04/10 PHP
jquery 简单导航实现代码
2009/09/11 Javascript
JavaScript类和继承 prototype属性
2010/09/03 Javascript
文本框中禁止非数字字符输入比如手机号码、邮编
2013/08/19 Javascript
node.js中的emitter.emit方法使用说明
2014/12/10 Javascript
javascript中apply、call和bind的使用区别
2016/04/05 Javascript
js实现多图左右切换功能
2016/08/04 Javascript
jquery PrintArea 实现票据的套打功能(代码)
2017/03/17 Javascript
基于JavaScript实现活动倒计时效果
2017/04/20 Javascript
ajax前台后台跨域请求处理方式
2018/02/08 Javascript
教你完全理解ReentrantLock重入锁
2019/06/03 Javascript
JS异步处理的进化史深入讲解
2019/08/25 Javascript
jQuery-App输入框实现实时搜索
2020/11/19 jQuery
[03:46]DOTA2英雄基础教程 维萨吉
2013/12/11 DOTA
[00:30]明星选手化身超级英雄!2018DOTA2亚洲邀请赛全明星赛来临!
2018/04/06 DOTA
Python实现发送email的几种常用方法
2014/08/18 Python
Python爬取Coursera课程资源的详细过程
2014/11/04 Python
python多进程实现进程间通信实例
2017/11/24 Python
Python matplotlib的使用并自定义colormap的方法
2018/12/13 Python
kafka-python批量发送数据的实例
2018/12/27 Python
详解python之heapq模块及排序操作
2019/04/04 Python
python读写csv文件的方法
2019/08/13 Python
Django:使用filter的pk进行多值查询操作
2020/07/15 Python
如何在mac版pycharm选择python版本
2020/07/21 Python
python和opencv构建运动检测器的实现
2021/03/03 Python
Reebok俄罗斯官方网上商店:购买锐步运动服装和鞋子
2016/09/26 全球购物
德国2018年度最佳在线药房:Bodfeld Apotheke
2019/11/04 全球购物
大学生党员自我评价范文
2014/04/09 职场文书
婚前协议书怎么写
2014/04/15 职场文书
节水倡议书范文
2014/04/15 职场文书
广告学专业毕业生自荐信
2014/05/28 职场文书
机关党总支领导班子整改方案
2014/09/20 职场文书
2014年依法行政工作总结
2014/11/19 职场文书
公司承诺函范文
2015/01/21 职场文书
竞聘演讲报告:基本写作有哪些?附开头范文
2019/10/16 职场文书
浅谈克隆 JavaScript
2021/11/02 Javascript