zoukankan      html  css  js  c++  java
  • 关于Plupload结合上传插件jquery.plupload.queue的使用

      之前使用过很多的上传组件,但对各种浏览器的兼容性太差,不得不放弃!!
      plupload 是款很强大的上传组件,不得不推荐。plupload 前端根据浏览器不同选择使用Html5、 Gears, Silverlight, Flash, BrowserPlus来对文件进行客户端优化,比如大图片的压缩,大文件分块上传,上传进度条、多文件上传等。官方网站:http://plupload.com/
     
    效果截图:
     


    配置文档说明:

    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: { 320, height: 240, quality: 90}

    runtimes:上传插件初始化选用那种方式的优先级顺序,如果第一个初始化失败就走第二个,依次类推

    required_features:需要那些特性,才能初始化插件

    url:上传服务器地址

    unique_names:是否生成唯一的文件名,避免与服务器文件重名

    urlstream_upload:布尔值 如果是flash上传应该用URLStream 代替FileReference.upload

    jquery部件的属性:

    dragdrop:是否支持拖拽,默认值true

    multiple_queues:是否可以多次上传

    preinit:插件初始化前回调函数

    rename:布尔值,上传之前可以重命名文件,默认false,木有找到如何重命名啊

     

    API文档:

           方法列表:

      Uploader(setting):创建实例的构造方法

    var uploader = new plupload.Uploader({
        runtimes : 'gears,html5,flash',
        browse_button : 'button_id'
    });

      bind(event, function[, scope]):绑定事件

    uploader.bind('Init', function(up) {
        alert('Supports drag/drop: ' + (!!up.features.dragdrop));
    });

      destroy():销毁plupload的实例对象

    uploader.destroy()

      getFile(id): 获取上传文件信息     

    uploader.bind('FilesAdded', function(up, files) {
        for (var i in files) {
            up.getFile(files[i].id);      
        }
    });<span style="color: #ff0000; font-size: 13px;"> </span>

    注:file:{
      id:文件编号,
      loaded: 已经上传多少字节,
      name: 文件名,
      percent: 上传进度,
      size: 文件大小,
      status: 有四种状态 QUEUED, UPLOADING, FAILED, DONE.对应数值
    }

    
    

    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:当前上传文件的信息集合

        事件集合:(up为uploader缩写)

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

     

     参见:

        示例:http://plupload.com/example_queuewidget.php

       API:http://plupload.com/plupload/docs/api/index.html

     
    事例代码:
    <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
    <%
        String path = request.getContextPath();
        String basePath = request.getScheme() + "://"
                + request.getServerName() + ":" + request.getServerPort()
                + path + "/";
    %>
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'index.jsp' starting page</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    
    <script type="text/javascript" src="common/plupload/moxie.js"></script>
    <script type="text/javascript" src="common/plupload/plupload.dev.js"></script>
    
    <!-- Load Queue widget CSS and jQuery -->
    <style type="text/css"> @importurl(common/plupload/jquery.plupload.queue/css/jquery.plupload.queue.css);</style>
    
    <script type="text/javascript" src="http://www.iadpush.com/assets/common/jquery-1.8.2.min.js"></script>
    
    <!-- Thirdparty intialization scripts, needed for the Google Gears and BrowserPlus runtimes -->
    <script type="text/javascript" src="http://bp.yahooapis.com/2.4.21/browserplus-min.js"></script>
    
    <!-- Load plupload and all it's runtimes and finally the jQuery queue widget -->
    <script type="text/javascript" src="common/plupload/jquery.plupload.queue/jquery.plupload.queue.min.js"></script>
    
    </head>
    
    <body>
    <div id="uploader">
        <p>Your browser doesn't have Flash, Silverlight or HTML5 support.</p>
    </div>
    
    <script>
        $('#uploader').pluploadQueue({
            url : 'Upload',
            filters : [ {
                title : "Image files",
                extensions : "jpg,gif,png"
            } ],
            rename : true,
            flash_swf_url : 'common/plupload/Moxie.swf',
            silverlight_xap_url : 'common/plupload/Moxie.xap',
            filters : {
                max_file_size : '100mb',
                mime_types : [ {
                    title : "Image files",
                    extensions : "jpg,gif,png"
                }, {
                    title : "Zip files",
                    extensions : "zip,apk,doc,exe"
                } ]
            }
        });
    </script>
    </body>
    </html>

     

     

    特性:

       

    注释:1、gears:http://zh.wikipedia.org/wiki/Gears

               2、Silverlight:http://zh.wikipedia.org/wiki/Silverlight

               3、browserplus: http://developer.yahoo.com/browserplus/ 

    注意:1、分块:chrome和firefox 4+ 支持。

              2、拖拽适用于firefox和webkit内核的浏览器,windows版的safari还存在一些问题待解决。

              3、图片缩放仅在firefox3.5+和chrome上支持,safari/opera 不支持直接数据访问选定的文件。

              4、目前所有的浏览器不支持文件类型过滤。但是,我们填写HTML5的接受文件类型过滤属性,一旦有支持它会工作。 

             5、 多文件上传仅支持gecko和webkit内核的浏览器。

      

    借鉴:http://www.boyunjian.com/v/softd/Plupload.html  

  • 相关阅读:
    【Electron】Electron 调试
    正则表达式中test、exec、match的区别
    $.extend 与Object.assign的相同与不同
    【Vue】v-for中为什么要用key——diff算法中key作用源码
    【Vue】watch中的deep:true源码实现
    【Vue】vue中computed源码详解
    Network conditions——在不同网络条件下优化性能
    JS中的{}、()、自调用及()=>({})写法含义
    innerHTML和outerHTML区别以及document.querySelector
    SignalR
  • 原文地址:https://www.cnblogs.com/yong-insist/p/3908486.html
Copyright © 2011-2022 走看看