前端上传组件Plupload学习

来源：互联网发布：算法第四版目录编辑：程序博客网时间：2024/06/05 07:29

功能和特点：
1、拥有多种上传方式：HTML5、flash、silverlight以及传统的。Plupload会自动侦测当前的环境，选择最合适的上传方式，并且会优先使用HTML5的方式。所以你完全不用去操心当前的浏览器支持哪些上传方式，Plupload会自动为你选择最合适的方式。

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

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

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

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

引入的js文件：plupload.full.min.j

index.html

<!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>

学习文档：http://chaping.github.io/plupload/doc/

阅读全文

0 0