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 相关文章推荐
用js实现的页面关键字密度查询代码
Dec 27 Javascript
js RuntimeObject() 获取ie里面自定义函数或者属性的集合
Nov 23 Javascript
jquery解析JSON数据示例代码
Mar 17 Javascript
JavaScript控制按钮可用或不可用的方法
Apr 03 Javascript
jquery对复选框(checkbox)的操作汇总
Jan 13 Javascript
Web前端框架bootstrap实战【第一次接触使用】
Dec 28 Javascript
微信小程序 页面跳转如何实现传值
Apr 05 Javascript
解决webpack无法通过IP地址访问localhost的问题
Feb 22 Javascript
js实现动态改变radio状态的方法
Feb 28 Javascript
Node.js应用设置安全的沙箱环境
Apr 23 Javascript
JavaScript设计模式之单例模式简单实例教程
Jul 02 Javascript
webpack打包非模块化js的方法
Oct 24 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如何透过ODBC来存取数据库
2006/10/09 PHP
使用 eAccelerator加速PHP代码的目的
2007/03/16 PHP
linux php mysql数据库备份实现代码
2009/03/10 PHP
php开启安全模式后禁用的函数集合
2011/06/26 PHP
解析PHP自带的进位制之间的转换函数
2013/06/08 PHP
Yii2框架使用计划任务的方法
2016/05/25 PHP
关于Blog顶部的滚动导航条代码
2006/09/25 Javascript
Display SQL Server Version Information
2007/06/21 Javascript
基于Jquery的文字滚动跑马灯插件(一个页面多个滚动区)
2010/07/26 Javascript
浅析javascript中函数声明和函数表达式的区别
2015/02/15 Javascript
原生js模拟淘宝购物车项目实战
2015/11/18 Javascript
jquery判断输入密码两次是否相等
2020/04/22 Javascript
JS清除字符串中重复值的实现方法
2016/08/03 Javascript
Centos7 中安装 Node.js v4.4.4
2016/11/03 Javascript
js中less常用的方法小结
2017/08/09 Javascript
详解React中setState回调函数
2018/06/14 Javascript
React中使用外部样式的3种方式(小结)
2019/05/28 Javascript
小程序如何支持使用 async/await详解
2019/09/12 Javascript
Vue+element-ui添加自定义右键菜单的方法示例
2020/12/08 Vue.js
Python利用flask sqlalchemy实现分页效果
2020/08/02 Python
详解PyTorch批训练及优化器比较
2018/04/28 Python
numpy中的ndarray方法和属性详解
2019/05/27 Python
python使用 cx_Oracle 模块进行查询操作示例
2019/11/28 Python
Python将二维列表list的数据输出(TXT,Excel)
2020/04/23 Python
用pip给python安装matplotlib库的详细教程
2021/02/24 Python
关于css中margin的值和垂直外边距重叠问题
2020/10/27 HTML / CSS
THE OUTNET英国官网:国际设计师品牌折扣网站
2016/08/14 全球购物
优质飞蝇钓和渔具:RiverBum
2020/05/10 全球购物
求∏的近似值,直到最后一项的绝对值小于指定的数
2016/02/12 面试题
加拿大留学自荐信
2014/01/28 职场文书
《观潮》教学反思
2016/02/17 职场文书
2019西餐厅创业计划书范文!
2019/07/12 职场文书
大学生党员暑假实践(活动总结)
2019/08/21 职场文书
python实现简单反弹球游戏
2021/04/12 Python
Python+OpenCV实现图片中的圆形检测
2022/04/07 Python
浅谈为什么我的 z-index 又不生效了
2022/07/15 HTML / CSS