现在位置首页 / 前端开发 /正文

jquery好用的上传插件:Plupload使用说明和完整demo

作者: IT小兵 | 2014年9月12日| 热度:℃ | 评论: |参与:

jquery的上传插件我已经在本站介绍了很多了,今天介绍的plupload,是目前来说我用的很好的jquery上传插件之一。以前介绍的jquery的上传插件请看文章下面的参考。

首先来认识一下Plupload,官方地址:http://www.plupload.com/。 主要功能有:


Plupload有以下功能和特点:

1、拥有多种上传方式:HTML5、flash、silverlight以及传统的<input type=”file” />。Plupload会自动侦测当前的环境,选择最合适的上传方式,并且会优先使用HTML5的方式。所以你完全不用去操心当前的浏览器支持哪些上传方式,Plupload会自动为你选择最合适的方式。

2、支持以拖拽的方式来选取要上传的文件

3、支持在前端压缩图片,即在图片文件还未上传之前就对它进行压缩

4、可以直接读取原生的文件数据,这样的好处就是例如可以在图片文件还未上传之前就能把它显示在页面上预览

5、支持把大文件切割成小片进行上传,因为有些浏览器对很大的文件比如几G的一些文件无法上传。

先来看一下效果图:

是不是很炫?今天先将一下Plupload的基本使用办法,下一篇开放源代码。

lupload的使用方法也与SWFUpload非常类似,可以分为以下几步:

1、引入js文件

2、实例化一个plupload对象,传入一个配置参数对象进行各方面的配置。

3、调用plupload实例对象的init()方法进行初始化

4、在plupload实例对象上注册各种你需要的事件。plupload从选取文件到文件上传完成这个过程中,会触发很多事件。我们可以通过这些事件来跟plupload进行交互。

5、实现你自己所注册的那些事件的监听函数,利用这些监听函数来进行更新UI、提示上传进度等工作。

大家可以到http://chaping.github.io/plupload/demo/看一下我写的关于plupload的几个上传demo。

下面用一段代码来说明Plupload的使用方法。

首先看下我的目录结构

我将plupload所有文件放在javascript的upload下面。

我开发成ascx控件:

可以看到JqueryPUpload.ascx上传控件。

基本代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Plupload使用指南</title>
    <!-- 首先需要引入plupload的源代码 -->
    <script src="js/plupload.full.min.js"></script>
</head>
<body>
    <!-- 这里我们只使用最基本的html结构:一个选择文件的按钮,一个开始上传文件的按钮(甚至该按钮也可以不要) -->
    <p>
        <button id="browse">选择文件</button>
        <button id="start_upload">开始上传</button>
    </p>
    <script>
    //实例化一个plupload上传对象
    var uploader = new plupload.Uploader({
        browse_button : 'browse', //触发文件选择对话框的按钮,为那个元素id
        url : 'upload.php', //服务器端的上传页面地址
        flash_swf_url : 'js/Moxie.swf', //swf文件,当需要使用swf方式进行上传时需要配置该参数
        silverlight_xap_url : 'js/Moxie.xap' //silverlight文件,当需要使用silverlight方式进行上传时需要配置该参数
    });    
    //在实例对象上调用init()方法进行初始化
    uploader.init();
    //绑定各种事件,并在事件监听函数中做你想做的事
    uploader.bind('FilesAdded',function(uploader,files){
        //每个事件监听函数都会传入一些很有用的参数,
        //我们可以利用这些参数提供的信息来做比如更新UI,提示上传进度等操作
    });
    uploader.bind('UploadProgress',function(uploader,file){
        //每个事件监听函数都会传入一些很有用的参数,
        //我们可以利用这些参数提供的信息来做比如更新UI,提示上传进度等操作
    });
    //......
    //......
    //最后给"开始上传"按钮注册事件
    document.getElementById('start_upload').onclick = function(){
        uploader.start(); //调用实例对象的start()方法开始上传文件,当然你也可以在其他地方调用该方法
    }
    </script>
</body>
</html>

下一篇继续


[jquery插件--ajaxfileupload.js上传文件原理分析]

[ASP.NET 使用ajaxfileupload.js插件出现上传较大文件失败的解决方法]

[asp.net+jquery.upload实现多文件上传+进度条加遮罩层]

[asp.net文件/大文件上传需要配置的项目整理]

[asp.net服务端+JQuery上传插件Uploadify使用详解]

点击阅读本文所属分类的更多文章: 前端开发 。和高手一起交流:346717337
友荐云推荐

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:suchso@vip.qq.com

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

抢天猫双11红包
推荐使用阿里云服务器
echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:suchso@vip.qq.com

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询