jQuery无刷新上传之uploadify简单代码


Posted in Javascript onJanuary 17, 2017

先简单的侃两句:貌似已经有两个月的时间没有写过文章了,不过仍会像以前那样每天至少有一至两个小时是泡在园子里看各位大神的文章。前些天在研究“ajax无刷新上传”方面的一些插件,用SWFUpload实现了无刷新上传的功能,不过个人觉得不是很完美。

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

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

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

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

jQuery无刷新上传之uploadify简单代码

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

jQuery无刷新上传之uploadify简单代码

项目基本结构:

jQuery无刷新上传之uploadify简单代码

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

jQuery无刷新上传之uploadify简单代码

注意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无刷新上传之uploadify简单代码

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

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无刷新上传之uploadify简单代码

再参考官方的帮助文档,可以得知,在“

onUploadSuccess” 事件中可以设置上传完成后所执行的代码,则修改后的代码为:

jQuery无刷新上传之uploadify简单代码

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

        }

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery源码分析之Event事件分析
Jun 07 Javascript
jquery和css3实现的炫酷时尚的菜单导航
Sep 01 Javascript
Javascript基础教程之for循环
Jan 18 Javascript
Bootstrap每天必学之栅格系统(布局)
Nov 25 Javascript
基于JS实现checkbox全选功能实例代码
Oct 31 Javascript
javascript设计模式之Adapter模式【适配器模式】实现方法示例
Jan 13 Javascript
微信小程序 scroll-view隐藏滚动条详解
Jan 16 Javascript
jQuery EasyUI 组件加上“清除”功能实例详解
Apr 11 jQuery
Vue-cli3项目配置Vue.config.js实战记录
Jul 29 Javascript
Vue通过ref父子组件拿值方法
Sep 12 Javascript
node解析修改nginx配置文件操作实例分析
Nov 06 Javascript
在vue项目中 实现定义全局变量 全局函数操作
Oct 26 Javascript
javascript判断元素存在和判断元素存在于实时的dom中的方法
Jan 17 #Javascript
js处理层级数据结构的方法小结
Jan 17 #Javascript
JS中Select下拉列表类(支持输入模糊查询)功能
Jan 17 #Javascript
JavaScript的事件机制详解
Jan 17 #Javascript
js判断手机号是否正确并返回的实现代码
Jan 17 #Javascript
深入理解javascript中的 “this”
Jan 17 #Javascript
JavaScript正则表达式exec/g实现多次循环用法示例
Jan 17 #Javascript
You might like
mcrypt启用 加密以及解密过程详细解析
2013/08/07 PHP
PHP实现登陆表单提交CSRF及验证码
2017/01/24 PHP
PHP实现打包zip并下载功能
2018/06/12 PHP
Centos7 Yum安装PHP7.2流程教程详解
2019/07/02 PHP
js 遍历对象的属性的代码
2011/12/29 Javascript
html5的自定义data-*属性和jquery的data()方法的使用示例
2013/08/21 Javascript
JavaScript通过this变量快速找出用户选中radio按钮的方法
2015/03/23 Javascript
js插件dropload上拉下滑加载数据实例解析
2016/07/27 Javascript
jQuery层次选择器用法示例
2016/09/09 Javascript
Vuex模块化实现待办事项的状态管理
2017/03/15 Javascript
关于vue.js v-bind 的一些理解和思考
2017/06/06 Javascript
微信小程序 密码输入(源码下载)
2017/06/27 Javascript
Mui使用jquery并且使用点击跳转新窗口的实例
2017/08/19 jQuery
Nodejs 复制文件/文件夹的方法
2017/08/24 NodeJs
Angular Renderer (渲染器)的具体使用
2018/05/03 Javascript
js序列化和反序列化的使用讲解
2019/01/19 Javascript
JS实现checkbox互斥(单选)功能示例
2019/05/04 Javascript
简单分析js中的this的原理
2019/08/31 Javascript
Vue 实现登录界面验证码功能
2020/01/03 Javascript
Vue使用轮询定时发送请求代码
2020/08/10 Javascript
[43:58]DOTA2上海特级锦标赛C组败者赛 Newbee VS Archon第二局
2016/02/27 DOTA
python的几种开发工具介绍
2007/03/07 Python
简单介绍Python中的filter和lambda函数的使用
2015/04/07 Python
Python中input与raw_input 之间的比较
2017/08/20 Python
python实现移位加密和解密
2019/03/22 Python
浅谈PyQt5 的帮助文档查找方法,可以查看每个类的方法
2019/06/25 Python
PYTHON实现SIGN签名的过程解析
2019/10/28 Python
浅谈HTML5 服务器推送事件(Server-sent Events)
2017/08/01 HTML / CSS
阿姆斯特丹杜莎夫人蜡像馆官方网站:Madame Tussauds Amsterdam
2019/03/12 全球购物
上海奥佳笔试题面试题
2016/11/16 面试题
大学生村官座谈会发言材料
2014/05/25 职场文书
卫生保健工作总结2015
2015/05/18 职场文书
招商银行收入证明
2015/06/17 职场文书
Python中rapidjson参数校验实现
2021/07/25 Python
用Python实现屏幕截图详解
2022/01/22 Python
Redis sentinel哨兵集群的实现步骤
2022/07/15 Redis