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 相关文章推荐
jquery 多行滚动代码(附详细解释)
Jun 17 Javascript
js 中 document.createEvent的用法
Aug 29 Javascript
文本框input聚焦失焦样式实现代码
Oct 12 Javascript
自己动手实现jQuery Callbacks完整功能代码详解
Nov 25 Javascript
JavaScript表单通过正则表达式验证电话号码
Mar 14 Javascript
JS+CSS实现模仿浏览器网页字符查找功能的方法
Feb 26 Javascript
js简单的点击返回顶部效果实现方法
Apr 10 Javascript
Node.js学习之TCP/IP数据通讯(实例讲解)
Oct 11 Javascript
vue.js 实现点击按钮动态添加li的方法
Sep 07 Javascript
vue项目里面引用svg文件并给svg里面的元素赋值
Aug 17 Javascript
Vue使用v-viewer实现图片预览
Oct 21 Javascript
JavaScript实现滚动加载更多
Dec 27 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
js 页面执行时间计算代码
2009/03/04 Javascript
AngularJS基础学习笔记之指令
2015/05/10 Javascript
JavaScript中for循环的使用详解
2015/06/03 Javascript
js省市联动效果完整实例代码
2015/12/09 Javascript
JS获取input file绝对路径的方法(推荐)
2016/08/02 Javascript
Angular2 路由问题修复详解
2017/03/01 Javascript
JS创建Tag标签的方法详解
2017/06/09 Javascript
node.js 用socket实现聊天的示例代码
2017/10/17 Javascript
Vue 仿QQ左滑删除组件功能
2018/03/12 Javascript
JS中的回调函数实例浅析
2018/03/21 Javascript
Vue监听数据渲染DOM完以后执行某个函数详解
2018/09/11 Javascript
自定义javascript验证框架示例【附源码下载】
2019/05/31 Javascript
Vue使用Clipboard.JS在h5页面中复制内容实例详解
2019/09/03 Javascript
JS实现简易留言板(节点操作)
2020/03/16 Javascript
js实现翻牌小游戏
2020/07/31 Javascript
python实现多线程暴力破解登陆路由器功能代码分享
2015/01/04 Python
Python3使用requests登录人人影视网站的方法
2016/05/11 Python
浅述python2与python3的简单区别
2018/09/19 Python
对python读取zip压缩文件里面的csv数据实例详解
2019/02/08 Python
windows下python虚拟环境virtualenv安装和使用详解
2019/07/16 Python
在python中用url_for构造URL的方法
2019/07/25 Python
在Python中os.fork()产生子进程的例子
2019/08/08 Python
Python搭建代理IP池实现检测IP的方法
2019/10/27 Python
Python使用enumerate获取迭代元素下标
2020/02/03 Python
pandas DataFrame 数据选取,修改,切片的实现
2020/04/24 Python
Python使用Selenium实现淘宝抢单的流程分析
2020/06/23 Python
Python高阶函数与装饰器函数的深入讲解
2020/11/10 Python
python excel多行合并的方法
2020/12/09 Python
国外平面设计素材网站:The Hungry JPEG
2017/03/28 全球购物
彪马法国官网:PUMA法国
2019/12/15 全球购物
银行委托书范本
2014/09/28 职场文书
孝老爱亲事迹材料
2014/12/24 职场文书
幼儿园大班毕业评语
2014/12/31 职场文书
邀请函模板
2015/02/02 职场文书
Python3使用Qt5来实现简易的五子棋小游戏
2022/05/02 Python
Go语言怎么使用变长参数函数
2022/07/15 Golang