jquery uploadify文件上传插件用法精析

 

jquery uploadify文件上传插件用法精析

CreationTime--2018年8月2日11点12分

Author:Marydon

一、参数说明

1.参数设置

$("#file_upload").uploadify({
    height        : 30,//高度
    swf           : '/uploadify/uploadify.swf',//指定swf文件
    uploader      : '/uploadify/uploadify.do',//后台处理的url
    width         : 120,//宽度
    buttonText: '上传图片', //按钮显示的文字
    fileTypeExts:  '*.*',//上传文件的类型,多个类型使用;分割'*.gif; *.jpg; *.png',默认值为：'*.*'
    fileTypeDesc: 'Image Files',//这个属性值必须设置fileTypeExts属性后才有效，用来设置选择文件对话框中的提示文本,默认值为：All Files
    formData: {'someKey':'someValue','someOtherKey':1},//发送给后台的其他参数通过formData指定
    queueID: 'fileQueue',//可以为DOM元素的id,设置队列样式, 默认值为false,队列id动态生成，不带#
    auto: true,//选择文件后自动上传，默认值为：true
    multi: true,//设置为true将允许多文件上传，默认值为：true
    buttonClass:'xttblog',//上传按钮的样式
    buttonImage:'',//按钮的图片路径
    buttonCursor:'hand',//鼠标指针悬停在按钮上的样子，默认值为：hand
    checkExisting:'/uploadify/check-exists.do',//文件的路径，检查目标文件夹中是否已上载的文件的名称.如果文件名不存在,该脚本将返回1,如果文件名存在或0，默认值为false
    debug:true,//打开swfupload调试模式，默认值为：false
    fileObjName:'Filedata',//后台可以通过这个名字获取到文件对象,默认值为：Filedata
    fileSizeLimit:'',//允许文件上传的最大大小.这个值可以是数字或字符串.如果它是一个字符串,它接受一个单位(B,KB,MB,GB)，默认单位为KB。值设置为0,表示要上传的文件大小无限制(单文件大小)
    itemTemplate:'',//选择不同的HTML模板,添加上传文件到上传队列。主要有4种模板:instanceID(uploadify实例id)、fileID(文件id)、fileName(文件名字)、fileSize(文件大小).例如：${fileName}，默认值为：false
    method:'POST',//POST或GET，默认值为post
    overrideEvents:['onUploadProgress'],//重写事件,onUploadProgress进度条不更新，jsonArray,默认值为：空数组[]
    preventCaching:true,//是否缓存,默认值为：true不缓存
    progressData:'percentage',//进度条percentage百分百、speed上传速度更新,默认值为：percentage
    queueSizeLimit:999,//队列大小，超过将触发onselecterror事件,和uploadLimit类似,默认值为：999
    removeCompleted:true,//上传完成后是否删除上传队列，默认值为：true
    removeTimeout:3,//上传完成后,延迟3秒删除队列，默认值为：3秒
    requeueErrors:true,//如果为true上传失败后将继续尝试再次上传，默认值为：fasle
    successTimeout:30,//文件上传成功后服务端应返回成功标志，此项设置返回结果的超时时间，默认值为：30秒
    uploadLimit:999,//最大上传文件数量，如果达到或超出此限制将会触发onUploadError事件，默认值为：999
});

2.事件设置

$("#file_upload").uploadify({
    onCancel : function(file) {
        //移除文件时触发
    },
    onClearQueue:function(queueItemCount){
        //当调用函数cancel方法且queueItemCount>1时才触发，queueItemCount参数为被取消上传的文件数量
    },
    onDestroy:function(queueItemCount){
        //当destory方法被调用时触发
    },
    onDialogClose:function(queueData){
        //当文件浏览框关闭时触发，如果将此事件被重写，则当向队列添加文件上传出错时不会弹出错误消息提示
        //queueData对象包含如下属性：
        //filesSelected 文件选择对话框中共选择了多少个文件
        //filesQueued 已经向队列中添加了多少个文件
        //filesReplaced 已经向队列中替换了多少个文件
        //filesCancelled 取消了多少个文件
        //filesErrored 出错了多少个文件
    },
    onDialogOpen:function(){
        //当文件选择对话框弹出时立即出发，但可能在文件选择对话框被关闭之前并不能全部执行
    },
    onDisable:function(){
        //当disable方法禁用Uploadify上传按钮时被调用时触发
    },
    onEnable:function(){
        //当disable方法启用Uploadify上传按钮时被调用时触发
    },
    onFallback:function(){
        //当Uploadify初始化过程中检测到当前浏览器不支持flash时触发
        alert("当前浏览器未安装或未启用flash插件，无法进行文件上传！");
    },
    onInit:function(){//首次初始化Uploadify结束时触发
    },
    onQueueComplete:function(queueData){
        //文件上传队列处理完毕后触发,queueData对象包含如下属性：
        //uploadsSuccessful上传成功的文件数量
        //uploadsErrored上传失败的文件数量
    },
    onSelect:function(file){//选择文件后向队列中添加每个上传任务时都会触发
    },
    onSelectError:function(file, errorCode, errorMsg){
        //选择文件后向队列中添加每个上传任务时如果失败都会触发
        //file文件对象
        //errorCode错误代码如下：
        //QUEUE_LIMIT_EXCEEDED任务数量超出队列限制；
        //FILE_EXCEEDS_SIZE_LIMIT文件大小超出限制；
        //ZERO_BYTE_FILE文件大小为0
        //INVALID_FILETYPE文件类型不符合要求
        //errorMsg错误提示，可通过'this.queueData.errorMsg'定制
    },
    onSWFReady:function(){//Flash文件载入成功后触发
    },
    onUploadComplete:function(file){//每个文件上传完毕后无论成功与否都会触发
    },
    onUploadError:function(file, errorCode, errorMsg, errorString){
        //文件上传出错时触发，参数由服务端程序返回
    },
    onUploadProgress:function(file, bytesUploaded, bytesTotal, totalBytesUploaded, totalBytesTotal){
        //处理上传队列的过程中会多次触发此事件，每当任务状态有更新时都会触发
        //file文件对象
        //bytesUploaded已上传的字节数
        //bytesTotal文件总字节数
        //totalBytesUploaded当前任务队列中全部文件已上传的总字节数
        //totalBytesTotal当前任务队列中全部文件的总字节数
    },
    onUploadStart:function(file){//当文件即将开始上传时立即触发
    },
    onUploadSuccess:function(file, data, response){
        //当文件上传成功时触发
        //file文件对象
        //data服务端输出返回的信息，数据格式必须是字符串，否则接收不到
        //response有输出时为true,如果无响应为false，如果返回的是false,当超过successTimeout设置的时间后假定为true
    }
});

3.方法调用

cancel(fileID, suppressEvent)
用途：

　　取消队列中的任务，不管此任务是否已经开始上传

参数说明：
　　fileID要取消的文件ID，如果为空则取消队列中第一个任务，如果为'*'则取消所有任务
　　suppressEvent是否阻止触发onUploadCancel事件，当清空队列时非常实用

示例：

$('#file_upload').uploadify('cancel');// 取消第一个
$('#file_upload').uploadify('cancel','*');// 清空队列

destroy()
用途：

　　销毁Uploadify实例并将文件上传按钮恢复到原始状态

示例：

$('#file_upload').uploadify('destroy');// 销毁Uploadify实例

disable(setDisabled)
用途：

　　禁用或启用文件浏览按钮

参数说明：
　　setDisabled – 设置为true表示禁用，false为启用

示例：

$('#file_upload').uploadify('disable',true);// 禁用按钮

settings(name, value, resetObjects)
用途：

　　获取或设置Uploadify实例参数

参数说明：
　　name – 属性名称，如果只提供属性名称则表示获取其值
　　value – 属性值
　　resetObjects – 设置为true时，更新postData对象将清空现有的值。否则，新的值将被添加到其末尾

示例：

$('#file_upload').uploadify('settings','buttonText','BROWSE');// 将按钮参数的值改为BROWSE
$('#file_upload').uploadify('settings','buttonText'));// 获取到按钮参数的值　

stop()
用途：

　　停止当前正在上传的任务

示例：

$('#file_upload').uploadify('stop');//停止上传

upload(fileID)
用途：

　　立即上传指定的文件，如果fileID为’*'表示上传所有文件，要指定上传多个文件，则将每个文件的fileID作为一个参数

示例：

$('#file_upload').uploadify('upload','*');// 开始上传所有文件

二、调用

　　第一步：页面随意设置一个id="file_upload"的html元素

<!-- 文件上传 -->
<div id="file_upload"></div>

　　说明：指定一个dom元素的id，该dom元素在uploadify初始化后会被Flash按钮代替，这个dom元素相当于一个占位符。

　　第二步：页面加载完毕后，绑定并设置参数

// 页面加载完毕后，才能获取到file_upload这个dom对象
$(function(){
    $('#file_upload').uploadify({
        // 参数配置
    });
});　

　　加载成功，页面元素展示

三、数据交互

1.前台如何传参？

　　方法一：get传参

　　方式一（正确方式）：通过onUploadStart实现（推荐使用）

$('#file_upload').uploadify({
    'method', 'get',
    'buttonText' : '添加文件',
    'fileTypeExts' : '*.gif; *.jpg; *.png;*.pdf;*.zip;',// 文件类型限制
    'fileTypeDesc' : '请选择gif jpg png pdf zip类型的文件',// 文件类型描述
    'swf' : baseUrl + '/uploadify/flash/uploadify.swf',// flash插件
    'uploader' : baseUrl + '/uploadFile.do',// 上传的文件请求处理
    'onDialogClose' : function(queueData) {// 选择文件窗口关闭时，触发
         
    },
    'onUploadStart' : function(file){// 文件上传前，触发
        // 请求参数：上传每个文件的同时提交到服务器的额外数据，中文需要编码
        $('#file_upload').uploadify("settings","formData",{
            'param1' : encodeURI('测试文件上传传参'),
            'param2' : $('#aa').val()// 动态参数
        });
    },
    'onUploadSuccess' : function(file, data, response) {// 上传成功
        window.open(baseUrl + '/fileList.jsp');
    },
    'onUploadError' : function(file, errorCode, errorMsg, errorString) {// 上传失败
         
    },
    'onFallback' : function(){// 文件上传按钮加载失败
        alert("当前浏览器未安装或未启用flash插件，无法进行文件上传！");
    }
});

　　方式二（错误实现方式）：直接声明

　　直接声明 'formData' : {'param1': encodeURI('测试文件上传传参')},这种方式后台接收不到传递的参数。

　　方法二：post传参

　　方式一：通过onUploadStart实现（推荐使用）

$('#file_upload').uploadify({
    'method', 'post',// 默认值为post，可以不声明
    'buttonText' : '添加文件',
    'fileTypeExts' : '*.gif; *.jpg; *.png;*.pdf;*.zip;',// 文件类型限制
    'fileTypeDesc' : '请选择gif jpg png pdf zip类型的文件',// 文件类型描述
    'swf' : baseUrl + '/uploadify/flash/uploadify.swf',// flash插件
    'uploader' : baseUrl + '/uploadFile.do',// 上传的文件请求处理
    'onDialogClose' : function(queueData) {// 选择文件窗口关闭时，触发
        
    },
    'onUploadStart' : function(file){// 文件上传前，触发
        // 请求参数：上传每个文件的同时提交到服务器的额外数据，中文需要编码
        $('#file_upload').uploadify("settings","formData",{
            'param1' : encodeURI('测试文件上传传参'),
            'param2' : $('#aa').val()// 动态参数
        });
    },
    'onUploadSuccess' : function(file, data, response) {// 上传成功
        window.open(baseUrl + '/fileList.jsp');
    },
    'onUploadError' : function(file, errorCode, errorMsg, errorString) {// 上传失败
        
    },
    'onFallback' : function(){// 文件上传按钮加载失败
        alert("当前浏览器未安装或未启用flash插件，无法进行文件上传！");
    }
});

　　方式二： 直接声明

　　'formData' : {'param1': encodeURI('测试文件上传传参')},

2.后台如何接收到参数？

　　方式一对应的接收参数的方法为：

// 通过指定onUploadStart()获取参数
String param1 = request.getParameter("param1");
// 解码
param1 = URLDecoder.decode(param1, "utf-8");

　　方式二对应的接收参数方法为： 

@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) {
    // 通过设置formData获取参数
    DiskFileItemFactory factory = new DiskFileItemFactory();
    ServletContext servletContext = this.getServletConfig().getServletContext();
    File repository = (File) servletContext.getAttribute("javax.servlet.context.tempdir");
    factory.setRepository(repository);
    ServletFileUpload upload = new ServletFileUpload(factory);
    try {
        List<FileItem> items = upload.parseRequest(req);
        // 7.对所有请求信息进行判断
        Iterator<FileItem> iter = items.iterator();
        while (iter.hasNext()) {
            FileItem item = iter.next();
            // form表单格式
            if (item.isFormField()) {
                String paramName = item.getFieldName();
                if ("param1".equals(paramName)) {
                    String paramValue = item.getString();
                    // 解码
                    paramValue = URLDecoder.decode(paramValue, "utf-8");
                    System.out.println("参数名：" + paramName + "=" + paramValue);
                }
            } else {
                // 文件格式处理 TODO
            }
        }
 
    } catch (Exception e) {
        e.printStackTrace();
    }
}

3.小结：

　　推荐使用第一种方式进行传参；

　　不管是get传参还是post传参，参数值为中文时，都需要先进行编码，否则后台接收到的数据乱码（比如：使用encodeURI()）；

　　不管在初始化的时候，定义的uploadify对象，定义的是post还是get，最终是以post方式进行提交的。

四、如何设置手动上传？

　　第一步：设置参数

　　'auto' : false,

　　第二步：页面设置按钮

<div id="ctrlUpload">
    <a href="javascript:;" onclick="$('#file_upload').uploadify('upload', '*');" class="Button" 
        onmouseover="javascript:this.className='ButtonOver'" onmouseout="javascript:this.className='Button'">
                上传所有
    </a>    
    <a href="javascript:;" onclick="$('#file_upload').uploadify('cancel', '*');$('#ctrlUpload').hide();" class="Button"
        onmouseover="javascript:this.className='ButtonOver'" onmouseout="javascript:this.className='Button'">
                取消上传
    </a>	
</div>

 

 相关推荐：

• 官网文档：http://www.uploadify.com/documentation/
• servlet实现文件上传，预览，下载和删除