SWFUpload 文件上传插件常用的配置讲解

上传文件swfUpload 插件：

基本的文件上传涉及到的四个文件  （还有一个处理数据的php文件  这里没有涉及到）

html页面：

upload_window.html

js文件：

swfupload.js

handlers.js

fileprogress.js

第一：从html页面出发：

重要的是将页面加载时间中的var setting={}这个大对象中的参数设置好  以下都是这个对象里面的常用配置 非常重要

首先需要将swfupload.swf加载

在 var  setting={} 这个大对象里面加flash_url:值

如： flash_url: "<tpl>$siteurl_static</tpl>/assets/uc/js/swfupload.swf",

然后需要将上传的路径加入 如： upload_url: "http://load.zom.com/u.do?uploadkey=" + uploadkey + "&ck=" + ck + "&cc=" + cc,(java的上传路径)

相关的设置常用的有：

file_size_limit  (设置上传的大小)    file_types（设置文件上传的类型）file_types_description（设置文件上传描述）

file_upload_limit （设置文件上传的数量限制）file_queue_limit （设置文件队列数量限制森孝）

prevent_swf_caching : false  （在相关的swf文件增加随机参数避免Flash被缓存）

debug:false

按钮的相关配置：

button_width: "200",

button_height: "50",

button_text_left_padding: 16,

button_text_top_padding: 7,

button_cursor:  button_cursor 指定鼠标悬晌败停在Flash按钮上时的光标样式,可用值为SWFUpload.CURSOR里定义的常量。如：button_cursor: SWFUpload.CURSOR.HAND,

button_action（设置只能上传一个文档的限制：--》button_action: SWFUpload.BUTTON_ACTION.SELECT_FILE）

之后就是设置一些事件处理函数  这些都是在  handlers.js 里面相应的函数

file_dialog_start_handler: fileDialogStart,（设置文件对话开始函数）

file_queued_handler: fileQueued,（设置文此谨稿件队列函数）

file_dialog_complete_handler: fileDialogComplete,（设置文件对话完成处理函数）

file_queue_error_handler: fileQueueError,（设置队列错误处理函数）

upload_start_handler: uploadStart,（设置开始上传函数）

upload_progress_handler: uploadProgress,（设置上传进度处理函数）

upload_error_handler: uploadError,（设置上传错误处理函数）

upload_complete_handler: uploadComplete,（设置上传完成处理函数）

upload_success_handler: uploadSuccess（设置上传成功处理函数）

以上的配置都是在页面自动加载函数的setting大对象里面需要配置的基本参数

除了以上这些还有下面相应的非常关键的配置

别忘记：在setting大对象结束之后 在自动加载函数结束之前还有swfu = new SWFUpload(settings)  实例化一个对象

var setting还有比较重要的配置  如下：

1.关于上传进度的配置是关键：

在var setting={}这个大对象里面设置一个元素：

custom_settings: {

                    progressTarget: "fsUploadProgress"

 },

progressTarget的值（即fsUploadProgress）是文件上传进度的显示 将html里面设置相应的位置放id="fsUploadProgress"

如：<div class="progressbar progressbar-0" id="fsUploadProgress">

            <span class="prog-num">0</span>

        </div>

span标签里的0就是从0开始进行上传  0就是初始的显示进度

2：关于上传的按钮设置 

在 var setting={} 这个大对象里面设置  button_placeholder_id : "spanButtonPlaceHolder"

需要将html相应的上传按钮加上相应的id="spanButtonPlaceHolder"

如：<div id="upload_doc" class="up-btn"><i >上传文档</i><span id="spanButtonPlaceHolder"></span></div>

成功上传需要将相应的数据进行处理：

在html页面中需要写ajax进行数据的处理~

如：

//成功后调用

function agree_upload(){

            var doc_id=$('.doc_title').attr('id')

            if(doc_id>0){

                uploadFinish(doc_id)

                parent.DOC88Window.close()

            }else{

                alert('您还未选择重新上传的文档')

            }

        }

        function uploadFinish(new_p_id) {

            var old_p_id = "<tpl>$p_id</tpl>"

            $.ajax({

                url: "/ucr/doc.php?act=save_upload",

                type: "post",

                data: {

                    old_p_id: old_p_id,

                    new_p_id: new_p_id

                },

                dataType: "json",

                success: function (msg) {

                    if (msg.result == 1) {

                        alert("数据正确")

                    } else {

                        alert("数据错误")

                    }

                }

            })

        }

第二：因为html页面中setting配置中有相应的函数处理配置  涉及到handler.js函数，所以接下来到handler.js文件的处理配置

根据html页面的配置 处理函数的顺序进行相应的配置

首先是fileQueue函数  文件排队函数：

需要设置一个变量 关于flash动画的函数

var stats = swfu.getStats()

根据需要将文件上传队列数量进行限制

if (stats.files_queued >1) {

            alert("您的附件不能超过1个")

                    return false

    }

接下来是fileQueueError函数  文件排队错误函数：

根据需要将相应的设置放在这个函数里面

可以放在try catch函数里面    设置的限制如下：

      switch (errorCode) {

            case SWFUpload.QUEUE_ERROR.FILE_EXCEEDS_SIZE_LIMIT:

                alert('单个文件大小不要超过50MB')

                break

            case SWFUpload.QUEUE_ERROR.ZERO_BYTE_FILE:

                alert('不能上传空文件')

                this.debug("Error Code: Zero byte file, File name: " + file.name + ", File size: " + file.size + ", Message: " + message)

                break

            case SWFUpload.QUEUE_ERROR.INVALID_FILETYPE:

                alert('文件类型错误')

                break

            default:

                if (file !== null) {

                }

                this.debug("Error Code: " + errorCode + ", File name: " + file.name + ", File size: " + file.size + ", Message: " + message)

                break

        }

接下来是uploadStart函数  文件上传开始函数：

设置相应的功能按钮的变换  比如上传开始（走到这个函数时 可以将相应的上传按钮改成上传中 并且禁止点击 就是禁用功能 加上一个取消上传按钮 ）

可以将上传的文件的名称和文件格式显示出来 

如：

$("#upload_doc i").html("上传中")

    $('#cancel_upload').html('取消')

$("#upload_doc").attr('disabled','disabled')

var name = file.name

                $('.doc_title').html(name)

        var format = file.type

        format = format.toLocaleUpperCase()

        format = format.replace('.', '')

        $('.doc_format').html(format) 

接下来是uploadProgress函数  文件上传进度函数：如：

var percent = Math.ceil((bytesLoaded / bytesTotal) * 100)//上传的进度

        var progress = new FileProgress(file, this.customSettings.progressTarget)

        progress.setProgress(percent)

        progress.setStatus("正在上传")

接下来是uploadSuccess函数  文件上传成功函数

然后是uploadError函数  上传失败函数：

其他相关的函数可以根据需要进行设置

第三：fileprogress.js文件  关于文件上传进度  关键的是：

FileProgress函数的设置：

如：

function FileProgress(file, targetID) {

        this.fileProgressID = file.id

        this.fileProgressWrapper = document.getElementById(this.fileProgressID)

        if (!this.fileProgressWrapper) {

                  this.fileProgressWrapper = document.createElement("li")

                  this.fileProgressWrapper.id = this.fileProgressID

                  document.getElementById(targetID).appendChild(this.fileProgressWrapper)

        }

      this.setTimer(null)

}

FileProgress.prototype.setProgress = function (percentage) {}  里面进度样式的处理

如：

if (percentage <= 5) {

                $(".progressbar").addClass('progressbar-5')

    } else if (percentage <= 10) {

                $(".progressbar").addClass('progressbar-10')

    }......

第四：swfupload.js文件    几乎不用修改 可以将不用的函数删减

有很详细的讲解 链接：https://www.cnblogs.com/myboke/p/5579236.html

http://www.runoob.com/w3cnote/swfupload-guide.html

（1）type：表示上传的方式，本地文件上传使用index，hdfs文件上传使用index_hadoop。

（2）context（可选）：用于配置一些运行参数，比如可以设置上传csv时候是否包含表头行

（3）dataSource：数据源名称，用于设置上传数据之后的表名称。

（4）spec：用于设置数据的具体配置以及转换方式，重点介绍

包含了三个字段：

（2.2.1）format：可以为csv，json，tsv，javascript、timeAndDims等

（2.2.2）timestampSpec:包含column以及format两个参数，column必选，用于指定时间戳对应的列。format用于指定时间格式，可以使用iso、millis、posix、zuto，默认为auto。

（2.2.3）columns：用于配置源文件中应该包含的所有列的列名

（2.2.4）dimensionsSpec用于指定维度列。dimensions用于指定所有的列；dimensionExclusion可选，用于悄颂指定不需要的数据，默认为空；spatialDimensions可选，用于指定列的空间限制，默认为空。

如果字段为String，那么直接列出，如果为其他类型如long/double等，需要使用{"type":"long","name":"字段名称" }单独列出，注意：配置时间戳的列不需要在dimensions中列出。

（3.1）type：默认为type=uniform，建议设置为uniform或arbitrary（尝试创建大小相等的字段）

（3.2）segmentGranularity：默认为day，用来确定每个segment包含的时间戳的范围，可以为 "SECOND" ... "MINUTE" ... "HOUR" ... "DAY" ... "DOW" ... "DOY" ... "WEEK" ... "MONTH" ... "QUARTER" ... "YEAR" ... "EPOCH" ... "DECADE" ... "CENTURY" ... "启雹郑MILLENNIUM" ... 等。

（3.3）queryGranularity：默认为None，允许查询的时间粒度，单位与segmentGranularity相同，如果为None那么允许以任意时间粒度进行查询。

（3.4）rollup：是否使用预计算算法，默认为true，推荐true，比较快。

（3.5）intervals：使用时间段来将数据源进行限制。只有时间段内的数据可以上传。

type可以为：count、longSum、doubleSum、doubleMin\doubleMax、longMin\longMax、doubleFirst\doubleLast、longFirst\longLast

除count外其他都需要指定name和fieldName两个参数，name表示最后输出的，也就是在表中体现肆磨的名称，而fieldName则代表源数据中的列名。

详细用法： metricsSpec-Aggregations官网详细解释

（2.1）

支持批量上传数据，路径指定到文件夹即可。

（2.2）当设置type为“granularity”时候，则需要根据时间戳使用路径格式将数据导入目录中。

Segment会给予时间戳进行分区，并根据其他类型进一步分区，druid支持hashed（基于每行所有维度的哈希值）和dimension（基于单个维度的范围）来进行分区。为了让druid在重查询负载下运行良好，对于段文件大小的推荐在300Mb到700mb之间，可以使用partitionsSpec来调整大小。

（2.1）hashed分区

hashed分区首先会选择多个Segment，然后根据每行数据所有列的哈希值对这些Segment进行分区，Segment的数量是输入数据集的基数以及目标分区大小自动确定的。

（2.2）Only-dimension单维度分区

选择作为分区指标的维度列，然后将该维度分隔成连续的不同的分区，每个分区都会包含该维度值在该范围内的所有行。默认情况下使用的维度都是自动指定的。

type:要分区的类型，dimension

targetPartitionSize（必须）：包含在分区中的目标行数，应该在500M-1G

maxPartitionSize（可选）：分区中包括的最大行数，默认为比targetPartitionSize大50%。

partitionDemension（可选），要分区的维度，为空时自动选择

assumeGrouped（可选）：如果数据源已经按照时间和维度分组了，该选项将会提高加载数据的速度，但是如果没有那么会选择次优分区。

其中的index.json便是需要配置的index文件

本地导入csv格式数据的 task文件示例

看不明白的稍微加工一下： 使用json在线解析层次更加清晰

导入hdfs中的csv格式文件

官网传送门：

使用hadoop进行批量离线导入-index文件的编写规范

方法如下：

1、使用FTP：FTP（FileTransferProtocol）是一种常用的文件传输协议，可以通过FTP客户端软件在宿主机和目标机之间进行文件上传和下载。需要在目标机上安装FTP服务器软件，并在宿主机上安装FTP客户端软件，然后在FTP客笑卖和户端中设置连接参数，即可实现文件传输。

2、使用SCP：SCP（SecureCopy）是一种安全文件传输协议，可以在宿主机和目标机之间以加密方式传输文件。需要在目标机上开启SSH服务，然后使用SCP客户端软件在宿主机和目标机之间进行文件传输。

3、使用Samba共享：Samba是一种开源软件，可以在Linux和Windows系统之间实现文件配氏共享。需要在目标机上安装并配置Samba服务器，然后在宿主机上访问共享目录进行碰盯文件传输。

4、使用云服务：例如，将文件上传至云存储服务（如百度云、Dropbox等），然后在目标机上登录相同的账户，即可实现文件下载。

---