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

女生的网名这么多〃 提交于 2020-04-28 07:30:57
 

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>

 

 
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!