前端上传组件plupload的原理以及如何使用

本篇文章为大家展示了前端上传组件plupload的原理以及如何使用，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。

　　一个主要的页面,其中包裹了一个iframe页面,在项目中,这个iframe页面包裹在主页面的div标签中,主要用于上传文件附件。用的是plupload.full插件。

　　Plupload有以下功能和特点：

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

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

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

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

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

　　Plupload的使用方法可以分为以下几步：

　　1、引入js文件，plupload的源文件可以去下载

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

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

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

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

　　<buttonid="browse">选择文件</button>

　　<buttonid="start_upload">开始上传</button>

　　<scriptsrc="plupload.full.min.js"></script>

　　//实例化一个plupload上传对象

　　varfileName="";

　　varuploader=newplupload.Uploader({//实例化一个plupload上传对象

　　browse_button:'browse',

　　file_data_name:'imgFile',//指定文件上传时文件域的名称

上述内容就是前端上传组件plupload的原理以及如何使用，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注亿速云行业资讯频道。