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 Event学习第三章 早期的事件处理程序
Feb 07 Javascript
jQuery 联动日历实现代码
May 31 Javascript
jquery索引在使用中的一些困惑
Oct 24 Javascript
购物车选中得到价格实现示例
Jan 26 Javascript
node.js中的fs.writeFile方法使用说明
Dec 14 Javascript
AngularJS基础知识笔记之表格
May 10 Javascript
JavaScript获取两个数组交集的方法
Jun 09 Javascript
表单验证正则表达式实例代码详解
Nov 09 Javascript
原生js jquery ajax请求以及jsonp的调用方法
Aug 04 jQuery
JavaScript面向对象精要(下部)
Sep 12 Javascript
浅谈Angularjs中不同类型的双向数据绑定
Jul 16 Javascript
利用js实现简单开关灯代码
Nov 23 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简单系统数据添加以及数据删除模块源文件下载
2008/06/07 PHP
PHP 学习路线与时间表
2010/02/21 PHP
Yii2基于Ajax自动获取表单数据的方法
2016/08/10 PHP
用window.location.href实现刷新另个框架页面
2007/03/07 Javascript
js删除所有的cookie的代码
2010/11/25 Javascript
js操纵dom生成下拉列表框的方法
2014/02/24 Javascript
jquery实现点击弹出层效果的简单实例
2014/03/03 Javascript
深入理解javascript作用域和闭包
2014/09/23 Javascript
jQuery带箭头提示框tooltips插件集锦
2014/11/17 Javascript
JavaScript中的对象序列化介绍
2014/12/30 Javascript
js使用post 方式打开新窗口
2015/02/26 Javascript
jQuery中 attr() 方法使用小结
2015/05/03 Javascript
通过js获取上传的图片信息(临时保存路径,名称,大小)然后通过ajax传递给后端的方法
2015/10/01 Javascript
bootstrap基础知识学习笔记
2016/11/02 Javascript
jQuery中on方法使用注意事项详解
2017/02/15 Javascript
vue-cli脚手架config目录下index.js配置文件的方法
2018/03/13 Javascript
基于Element封装一个表格组件tableList的使用方法
2020/06/29 Javascript
javascript实现贪吃蛇小游戏
2020/07/28 Javascript
用vite搭建vue3应用的实现方法
2021/02/22 Vue.js
Python查看多台服务器进程的脚本分享
2014/06/11 Python
python使用wxPython打开并播放wav文件的方法
2015/04/24 Python
python selenium执行所有测试用例并生成报告的方法
2019/02/13 Python
Python闭包和装饰器用法实例详解
2019/05/22 Python
PyQt5固定窗口大小的方法
2019/06/18 Python
python gensim使用word2vec词向量处理中文语料的方法
2019/07/05 Python
python装饰器练习题及答案
2019/11/01 Python
Python图像处理库PIL中图像格式转换的实现
2020/02/26 Python
Jupyter notebook运行Spark+Scala教程
2020/04/10 Python
Django Channel实时推送与聊天的示例代码
2020/04/30 Python
家庭睡衣和家庭用品:Little Blue House
2018/03/18 全球购物
Foreo国际站:Foreo International
2018/10/29 全球购物
Booking.com德国:预订最好的酒店和住宿
2020/02/16 全球购物
C#笔试题
2015/07/14 面试题
电气专业应届生求职信
2013/11/01 职场文书
二年级小学生评语
2014/04/21 职场文书
IT工程师岗位职责
2014/07/04 职场文书