jquery uploadify插件教程

最新推荐文章于 2025-09-10 14:53:18 发布

weixin_33873846

最新推荐文章于 2025-09-10 14:53:18 发布

阅读量82

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 后端 java ViewUI

原文链接：https://my.oschina.net/francis0115/blog/193712

本文介绍JqueryUploadify文件上传插件的使用方法，包括前端页面配置、后端处理逻辑及事件回调等关键信息。

2019独角兽企业重金招聘Python工程师标准>>>

插件：Jquery Uploadify文件上传插件 http://www.uploadify.com/

后端处理语言：java

使用前引入uploadify js和样式

<link rel="stylesheet" href="../css/uploadify.css" />

<script src="../js/uploadify/jquery.uploadify.min.js"></script>

前端代码：

            <div class="control-group">
                <label class="control-label">文档</label>
                <div class="controls">
                    <div id="queue"></div>
                    <input id="file_upload" name="fileAttach" type="file"  >
                </div>
            </div>
            <div class="form-actions">
                <button type="button" class="btn btn-primary" onclick="startUpload()" >
                上 传
                </button>
            </div>

upload JS：

//doc参考 http://www.uploadify.com/documentation/
   $(function() {
        $("#file_upload").uploadify({
            height          : 25,
            swf             : '../js/uploadify/uploadify.swf',
           //后端处理action
            uploader        : '../doct/uploadify',
            width           : 120,
            //fileTypeExts  : '*.doc; *.ppt;*.xls;',
            fileObjName     : 'fileAttach', //文件上传name
            auto            : false, //文件选中后是否自动提交
              multi    : false, //是否多选
           //文件上传完毕后消息框是否自动消失，默认true
            removeCompleted : false,  
            //文件上传完毕后消息框消失延迟时间,默认3 仅removeCompleted=true生效
            //removeTimeout   : 3,
            //文件上传大小限制           
            //fileSizeLimit : 999, 
            //文件队列传输完毕 queueDate [uploadsSuccessful,uploadsErrored]
            onQueueComplete : function(queueData){
                            alert('success:'+queueData.uploadsSuccessful+'fail:'+queueData.uploadsErrored)
            },
             //单文件传输成功           
            onUploadSuccess:function(file, data, response){                                         
                //alert('singleSuccess,fileName:'+file.name);
            },
           //单文件传输失败
            onUploadError : function(file, errorCode, errorMsg, errorString) {                      
                //eg:The file mozjs.dll errorCode -200 errorCode -200 errorMsg 302 errorString HTTP Error (302)
                alert('The file ' + file.name + ' errorCode ' + errorCode+ ' errorCode ' + errorCode+ ' errorMsg ' + errorMsg+ ' errorString ' + errorString);
            },
            //按钮显示名称
            buttonText    : "chose files..."                                                         
        });
    });
    //点击按钮触发上传
    function startUpload(){
        $('#file_upload').uploadify('upload','*');
    }

java后端接收参数：

    public void uploadify(TFileInfo fileInfo, HttpServletResponse response) {
        try {
            PrintWriter out = response.getWriter();
            out.write("test");
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

注意事项：

uploadify的事件只是对原有事件的补充，并不是覆盖。如果需要覆盖事项可以添加属性overrideEvents 。而消息提示的弹出都是通过onDialogClose触发，如果想改变就必须覆盖onDialogClose，具体可查源码。

转载于:https://my.oschina.net/francis0115/blog/193712