plupload 上传组件

最新推荐文章于 2021-01-17 13:50:06 发布

u010808961

最新推荐文章于 2021-01-17 13:50:06 发布

阅读量2.4k

点赞数

plupload简介

Plupload是有TinyMCE的开发者开发的，为您的内容管理系统或是类似上传程序提供一个高度可用的上传插件。Plupload 目前分为一个核心API 和一个jQuery上传队列部件，这样使你可以直接使用或是自己定制。

plupload特性

Plupload使用jQuery的组件做为选择文件和上传文件的队列组件。
Plupload使用Flash，Silverlight，HTML5，Gears，BrowserPlus、FileUpload上传文件技术引擎。
Plupload允许自定义使用Plupload核心API来进行选择文件与上传文件。
JavaScript用来激活文件选择对话框。此文件选择对话框是可以设置允许用户选择一个单独的文件或者是多个文件。选择的的文件类型也是可以被限制的，因此用户只能选择指定的适当的文件，例如jgp;gif。
Plupload允许对上传过程中的一些事件进行自定义，写上自己的处理方式。
选定的文件的上传和它所在页面、表单是独立的。每个文件都是单独上传的，这就保证了服务端脚本能够在一个时间点更容易地处理单个文件。具体信息可以访问Plupload官方网站：http://www.plupload.com/

plupload配置说明

Browse_button:触发浏览文件按钮标签的唯一id,,在flash、html5、和silverlight中能找到触发事件的源（我理解的，这个参数在队列部件不需要参见）
Container: 展现上传文件列表的容器，[默认是body]
chunk_size：当上传文件大于服务器接收端文件大小限制的时候，可以分多次请求发给服务器，如果不需要从设置中移出
drop_element：当浏览器支持拖拽的情况下，能够文件拖放到你想要的容器ID里
file_data_name：设置上传字段的名称。默认情况下被设置为文件。（我试验了没找到该如何使用它，暂且不提）
filters:选择文件扩展名的过滤器,每个过滤规则中只有title和ext两项[{title:'', extensions:''}]
flash_swf_url:flash文件地址
headers：自定义的插入http请求的键值对
max_file_size：最大上传文件大小（格式100b, 10kb, 10mb, 1gb）
multipart：布尔值，如果用mutlipart 代替二进制流的方式，在webkit下无法工作
multipart_params：跟 multipart关联在一起的键值
multi_selection：多选对话框
resize：修改图片属性 resize: {width: 320, height: 240, quality: 90}
runtimes:上传插件初始化选用那种方式的优先级顺序，如果第一个初始化失败就走第二个，依次类推
required_features：需要那些特性，才能初始化插件
url：上传服务器地址
unique_names：是否生成唯一的文件名，避免与服务器文件重名
urlstream_upload：布尔值如果是flash上传应该用URLStream 代替FileReference.upload

pluload API文档

方法列表

方法列表：

Uploader(setting)：创建实例的构造方法
bind(event, function[, scope])：绑定事件
destroy()：销毁plupload的实例对象
uploader.destroy()
getFile(id): 获取上传文件信息
init:初始化plupload实例，添加监听对象
uploader.destroy()
refresh：重新实例化uploader
removeFile(id):从file中移除某个文件
splice(start,length)：从队列中start开始删除length个文件，返回被删除的文件列表
start() 开始上传
stop()停止上传
unbind(name, function): 接触事件绑定
unbindAll()解绑所有事件

属性集合

features：uploader中包含那些特性
files:当前队列中的文件列表
id：uploader实例的唯一id
runtime：当前运行环境（是html5、flash等等)
state:当前上传进度状态
total：当前上传文件的信息集合

事件集合

BeforeUpload(up, file)：文件上传完之前触发的事件
ChunkUploaded(up, file,response)文件被分块上传的事件
Destroy(up):uploader的destroy调用的方法
Error(up, err)：上传出错的时候触发
Fileadded(up, files):用户选择文件时触发
FileRemoved(up, files):当文件从上传队列中移除触发
FileUploaded(up, file, res):文件上传成功的时候触发
Init(up):当初始化的时候触发
PostInit(up):init执行完以后要执行的事件触发
QueueChanged(up):当文件队列变化时触发
Refresh(up):当silverlight/flash或是其他运行环境需要移动的时候触发
StateChanged(up)当整个上传队列被改变的时候触发
UploadComplete(up,file)当队列中所有文件被上传完时触发
UploadFile(up,file)当一个文件被上传的时候触发

UploadProgress(up,file):当文件正在被上传中触发

html部分：

{{block head}}
<link rel="stylesheet"  href="{{=URL('static','plupload/js/jquery.plupload.queue/css/jquery.plupload.queue.css')}}">
<link rel="stylesheet"  href="{{=URL('static','plupload/js/jquery.ui.plupload/css/jquery.ui.plupload.css')}}">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/themes/base/jquery-ui.css"/>
<script type="text/javascript" src="{{=URL('static','plupload/js/plupload.full.min.js')}}"></script>
<script type="text/javascript" src="{{=URL('static','plupload/js/jquery.plupload.queue/jquery.plupload.queue.min.js')}}"></script>
<script type="text/javascript" src="{{=URL('static','plupload/js/jquery.ui.plupload/jquery.ui.plupload.js')}}"></script>
<script type="text/javascript" src="{{=URL('static','plupload/js/i18n/zh_CN.js')}}"></script>  
{{end}}

{{block plane}}
<div class="panel-body bt-border">
    <form class="form-horizontal" role="form">
        <div class="form-title">项目信息</div>
        <table width="400" border="0" cellspacing="0" cellpadding="0">
            <tr>
                <td align="right" width="155"><strong>项目名称：</strong></td>
                <td width="245">{{=tagProjName}}</td>
            </tr>
            <tr>
                <td align="right" width="155"><strong>数据源：</strong></td>
                <td width="245">{{=dataSource}}</td>
           </tr>
        </table>
    </form>
</div>

<div class="panel-body bt-border">
    <div class="form-title">同步标签项</div>
    <div class="bq">
        <table width="100%" class="table1">
            <tr align="center">
                <td>已同步标签的cookie量：<span class="bqfont">{{=counted}}</span></td>
                <td>未同步标签的cookie量：<span class="bqfont">{{=noCount}}</span></td>
            </tr>
        </table>
    </div>

    <div class="bq1">
    	 <div   id='upload'></div>
        <table width="950" border="0" cellspacing="0" cellpadding="0">
            <tr>
                <td>请选择操作：</td>
                <td><button id="downAll" type="button" class="btn btn-primary btn-square" data-toggle="modal" data-target="#downModal">下载全部cookie数据</button>  </td>
                <td><button id="downIncr" type="button" class="btn btn-primary btn-square" data-toggle="modal" data-target="#downModal">仅下载未同步的cookie数据</button>  </td>
               <!-- <td><input type="file" id="upload"  οnchange="uploadFiles()"></td>-->
               <td><button type="submit" id="cookie" class="btn btn-primary" data-toggle="modal" data-target="#basicModal" >上传标记的cookie数据</button></td>
            </tr> 
        </table>                  
    </div>
    <div class="bq2">您也可以使用API接口来进行自动同步，<a href="#">查看API调用方法</a></div>
    
    <div class="panel-body bt-border">
        <div class="bq1">
            <p>历史同步</p>
            <table class="table">
                <thead>
                    <tr>
                        <th width="17%">时间</th>
                        <th width="42%">同步Cookie量</th>
                        <th width="41%">状态</th>
                    </tr>
                </thead>
                <tbody id="tblSync" projId="{{=projId}}">
                    {{for sync in syncData:}}
                    <tr align="center">
                        <td>{{=sync.date}}</td>
                        <td>{{=sync.count}}</td>
                        <td>正在同步...  <font color="red">34%</font></td>
                    </tr>              
                    {{pass}}
                </tbody>
            </table>

            <div class="mpage">
                <div class="col-xs-6">
                    <div class="dataTables_info">共 {{=dataCount}} 条信息</div>
                </div>
                <div class="col-xs-6">
                    <div class="dataTables_paginate paging_simple_numbers" id="example_paginate">
                        <ul class="pagination">
                        </ul>
                    </div>
                </div>
            </div>
        </div> 
    </div>
</div>

<div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" id="close_button" class="fa fa-times-circle-o close" data-dismiss="modal" aria-hidden="true"></button>
                <h4 class="modal-title" id="myModalLabel">文件上传</h4>
            </div>
            <form id ='uploadForms' class="modal-body">
            </form>                
        </div>
    </div>
</div>

<div class="modal fade in" id="downModal" tabindex="-1" role="dialog" aria-labelledby="downModalLabel" aria-hidden="true" style="display: none;">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="downModalLabel"></h4>
            </div>
            <div class="modal-body">
                <div class="progress">
                    <div id="downProgress" class="progress-bar progress-bar-success" style="width: 10%">10%</div>
                </div>
            </div>
            <div class="modal-footer">
                <button id="cancelDown" type="button" class="btn btn-primary" data-dismiss="modal">取消</button>
           </div>
        </div>
    </div>
</div>

<pre name="code" class="javascript">js:

单文件上传

参数配置

function plupload(){
    $("#upload").pluploadQueue({
    runtimes : 'gears,flash,silverlight,browserplus,html5',
    url:'{{=URL('uploadFiles')}}',
    rename: true,
    //dragdrop: true,
    chunk_size : '2mb',
    //multiple_queues: true,
    unique_names: true,
    flash_swf_url:'{{=URL('static','plupload/js/Moxie.swf')}}',
    filters: [{ title: "file", extensions: "csv" },],
    silverlight_xap_url: '{{=URL('static','plupload/js/Moxie.xap')}}',
    //multipart:false,
    multipart_params: {"tagProjId":jQuery("#tblSync").attr('projId')},
});
}
//plupload();

点击上传
jQuery('#cookie').click(function(){
	var valm = $("#basicModal").attr('class');
	var sty = $("#basicModal").css('display');
	if(valm == "modal fade" | sty =="none;"){
		$("#basicModal").attr("class",'modal fade in');
        $("#basicModal").css('display','block');
		
	}else{
		$("#basicModal").attr("class",'modal fade');
        $("#basicModal").css('display','none');
	}
	plupload();
	var upload = $("#upload").pluploadQueue();

    上传时限制文件个数
    upload.bind('FilesAdded',function(up, files){
    $.each(files,function(i,file){
        if(up.files.length > 1){
            up.removeFile(file);
        }
    });
    });

    上传成功后：
    upload.bind('UploadComplete', function(up, file, res) {
    $("#basicModal").attr("class",'modal fade');
    $("#basicModal").css('display','none'); 
    $(".modal-backdrop").remove();
    // 上传回调函数
    jQuery("#updateSync").click();
    });
    
});