文件上传工具plupload的使用后

原创 2015年07月07日 10:48:23

    plupload 是一款优秀的上传框架,操作简单,支持各大主流浏览器,提供拖拽选择文件,文件多上传,进度,删除,停止等多个接口,满足各种业务逻辑的需要。效果如图:

   

1、首先登录http://www.plupload.com下载plupload包,目前最新是plupload-2.1.3。

2、将plupload包直接拷贝到WebRoot路径下,


3、在页面中引入jar


首先引入jquery包,因为jquery包是基础,plupload也依赖jquery包,再引入plupload.full.min.js包和jquery.ui.plupload.js,我没有用plupload提供的页面效果,不是我不用二是我没找到页面相关的文档,所以没有引入css包。

4、4步就是上传的接口了,接口是纯js接口,这段代码中有文件上传过程中个阶段的接口,所以你可以很方便的在各个阶段加上自己的业务逻辑。代码如下,

你只要把下面代码拷贝到<script></script>中在相应的接口中加上自己的业务逻辑,就可以实现文件上传。逻辑可以直接用jquery代码写。

window.onload = function () {              //初始化js

var uploader = new plupload.Uploader({    //创建一个上传对象,这个      对象中包含各种文件属性。

runtimes : 'html5,flash,silverlight,html4',//在上传时plupload会根据浏览器的不同选择最好的上传方式,有HTML5flashsliverlighthtml4

browse_button : 'pickfiles',//选择文件的按钮,可以是一个按钮也可以是一个div,根据情况自己选择。

container:'container',//文件上传容器,文件添加到上传队列的容器。  

url : 'file_upload.action',//上传文件路径,我在后台用的是struts2,所以路径就是一个action方法。

flash_swf_url:'plupload/Moxie.swf',//Flash环境路径设置  

silverlight_xap_url:'plupload/Moxie.xap',//silverlight环境路径设置  

unique_names :true,//生成唯一文件名,在文件上传过程中是否生成唯一的文件名称,根据需要自己选择。  

resize: {   //可以使用该参数对将要上传的图片进行压缩

  width: 100, //指定压缩后图片的宽度,如果没有设置该属性则默认为原始图片的宽度

  height: 100,//指定压缩后图片的高度,如果没有设置该属性则默认为原始图片的高度

  crop: true,//是否裁剪图片

  quality: 60,//压缩后图片的质量,只对jpg格式的图片有效,默认为90

  preserve_headers: false  //压缩后是否保留图片的元数据,true为保留

},

//max_file_size : '3gb',//100b, 10kb, 10mb, 1gb  

    //chunk_size : '1mb',//分块大小,小于这个大小的不分块  

    multipart:true,//为true时将以multipart/form-data的形式来上传文件,为false时则以二进制的格式来上传文件

    multi_selection:true,//是否可以在文件浏览对话框中选择多个文件,true为可以,false为不可以。默认true

    file_data_name:'file', //name='file'

    max_retries:5,//当发生plupload.HTTP_ERROR错误时的重试次数,为0时表示不重试

    drop_element:'drag',

filters : [{ //允许文件上传的类型,*表示所有文件都允许上传,

 title : '所有',  

         extensions : '*' 

}],

init: {//当Plupload初始化完成后触发   监听函数参数:(uploader plupload的实例对象)

PostInit: function() {

document.getElementById('uploadfiles').onclick = function() {//开始上传方法,点击上传按钮执行文件上传操作。

uploader.start();

  }

};

document.getElementById('stopUploadfiles').onclick = function() {//停止上传方法,点击停止上传按钮,停止文件上传,

uploader.stop();

},

FilesAdded: function(up, files){//当文件添加到上传队列后触发 

 

},

OptionChanged:function(up,option_name,new_value,old_value){//当使用Plupload实例的setOption()方法改变当前配置参数后触发 

},

UploadProgress: function(up, file){  //上传过程中触发  可以用此事件来显示上传进度

  

},

BeforeUpload:function(up, file){  //当队列中的某一个文件正要开始上传前触发 

},

UploadFile:function(up, file){ //当上传队列中某一个文件开始上传后触发 

},

StateChanged:function(up){ //当上传队列的状态发生改变时触发 

},

QueueChanged:function(up){ //当上传队列发生变化后触发,即上传队列新增了文件或移除了文件。QueueChanged事件会比FilesAdded或FilesRemoved事件先触发 

},

FilesRemoved:function(up, files){ //当文件从上传队列移除后触发 

},

ChunkUploaded:function(up,file,responseObject){ //当使用文件小片上传功能时,每一个小片上传完成后触发 

},

UploadComplete:function(up,files){ //当上传队列中所有文件都上传完成后触发  files为一个数组,里面的元素为本次已完成上传的所有文件对象

 

}

});

uploader.init();

};

页面效果如图:


版权声明:本文为博主原创文章,未经博主允许不得转载。

PHP + plupload.js JS插件实现多图上传并显示进度条加删除实例。

PHP + plupload.js JS插件实现多图上传并显示进度条加删除实例。
  • u012015434
  • u012015434
  • 2016年07月21日 11:47
  • 6060

Plupload上传插件使用

Pluload插件上传功能。
  • mr_caoshuai
  • mr_caoshuai
  • 2017年03月07日 16:32
  • 400

PLUpload文件上传的使用

简单而且实用的大(多)文件前端上传组件PlUpload
  • hjf_1291030386
  • hjf_1291030386
  • 2017年07月08日 10:18
  • 843

swfupload 和 plupload 图片上传 实时预览

  • 2013年12月27日 14:06
  • 544KB
  • 下载

前端上传组件Plupload使用指南 与swfupload一样强大

Plupload是一款由著名的web编辑器TinyMCE团队开发的上传组件,简单易用且功能强大,我们完全可以使用Plupload来代替以前的SWFUpload。 Plupload有以下功能和特点...
  • z69183787
  • z69183787
  • 2015年06月30日 18:00
  • 1654

前端上传组件Plupload使用说明指南

Plupload是一款由著名的web编辑器TinyMCE团队开发的上传组件,简单易用且功能强大,我们完全可以使用Plupload来代替以前的SWFUpload。 Plupload有以下功能和特点: ...
  • u011627980
  • u011627980
  • 2016年08月26日 14:21
  • 5873

文件上传控件PlupLoad 的使用

最近有用到一个PlupLoad 的文件上传控件,觉得还不错,但是找了很久网上也没有具体的使用方法或者说是很详细的使用方法,于是自己在完成功能之后就打算把这些方法给记录下来,以便后面需要使用的时候方便查...
  • samile6899
  • samile6899
  • 2017年04月09日 14:54
  • 723

Plupload js插件 使用pluploadQueue实例化uploader文件上传

兼容IE8浏览器,Plupload js文件上传插件:支持多文件上传和上传进度。使用pluploadQueue(settings)实例化的uploader的刷新、重新上传、地址动态修改。...
  • renshenguo
  • renshenguo
  • 2015年12月22日 13:53
  • 3874

plupload上传插件在SpringMVC中的整合(JAVA 版)【一】

前言:最近在给学院的网站做一个添加附件的功能
  • t894690230
  • t894690230
  • 2014年07月19日 10:06
  • 9587

Plupload初步使用

首先说一句,坑!! 遇到了2个坑爹的地方,url我是对每个文件分别赋值的,所以一开始并没有设置,如果不设置,点击选择文件的按钮都没有反应啊。还有就是每次添加文件之后需要一个div去显示需要上传的文件...
  • u011686226
  • u011686226
  • 2016年07月18日 09:04
  • 1235
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:文件上传工具plupload的使用后
举报原因:
原因补充:

(最多只允许输入30个字)