文件上传工具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();

};

页面效果如图:


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

相关文章推荐

PLUpload文件上传的使用

简单而且实用的大(多)文件前端上传组件PlUpload

前端上传组件Plupload使用指南(支持多文件选择上传)

Plupload是一款由著名的web编辑器TinyMCE团队开发的上传组件,简单易用且功能强大,我们完全可以使用Plupload来代替以前的SWFUpload。 Plupload有以下功能和...

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

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

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

使用plupload进行多文件上传

一 、插件下载 使用plupload必须下载plupload.full.min.js,你可以去http://www.plupload.com/官网进行下载! 二、如何使用 (1)首先加入下载的js文件...

多附件上传控件plupload的使用心得

在使用uploadify遇到问题时,去求救过plupload控件,使用uploadify所遇到的问题,可以看我的其他文章。plupload控件能解决我在使用uploadify时遇到的几个问题,唯一让我...

使用plupload实现多文件上传,自定义参数

使用plupload实现自定义参数的多文件上传功能!

PLUPLOAD同时上传多个文件

PLUPLOAD同时上传多个文件时,且文件重命名时,应该避免以时分秒命名文件,这样很容易导致文件名称一致...

附件上传的一个插件介绍--- plupload

选择js篇章。 最近在公司发行的封装的一个附件组件,前段js框架使用的是plupload,业余时间自己了解了下这个技术,已经就开门见山,说说这个上传插件。 plupload很强大。...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:文件上传工具plupload的使用后
举报原因:
原因补充:

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