现在位置首页 / 前端开发 /正文

jquery上传:plupload事件参数说明及demo

作者: IT小兵 | 2016年5月13日| 热度:℃ | 评论: |参与:

本篇重点说明一下plupload的事件参数。并用2个例子说明一下绑定事件。

1、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):当文件正在被上传中触发

2、事件绑定的方法:

第一种:在标签中直接生成此插件

$("#uploader").plupload({
runtimes: 'gears,flash,silverlight,browserplus,html5',
url: 'uploadFiles.ashx', // 服务端上传路径
max_file_size: '500mb', // 文件上传最大限制。
chunk_size: '1mb', // 上传分块每块的大小,这个值小于服务器最大上传限制的值即可。
unique_names: true, // 上传的文件名是否唯一
//直接在标签中初始化插件,,开始
init: {
QueueChanged: function (up)
{
//这是一个文件列表变更事件;些处写事件处理方法;
},//直接在标签中初始化插件,,结束
//// 是否生成缩略图(仅对图片文件有效)
//resize: { width: 320, height: 240, quality: 90 },
//// 这个数组是选择器,就是上传文件时限制的上传文件类型
filters: [{ title: "All files", extensions: "mp3,s48" }
],
// Flash文件 的所在路径
flash_swf_url: '/js/Moxie.swf',
// silverlight文件所在路径
silverlight_xap_url: '/js/Moxie.xap'
});

第二种方法:

<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,提示上传进度等操作
  });

必须要注意的是只能在初始化后才可以绑定事件!!

3、限制文件上传数量

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

4、上传成功事件

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

5、开始上传事件:

点击上传
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();


点击阅读本文所属分类的更多文章: 前端开发 。和高手一起交流:346717337
友荐云推荐

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:[email protected]

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:[email protected]

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询