文档章节

jquery uploadify插件教程

青V芒
 青V芒
发布于 2014/01/17 09:40
字数 410
阅读 3362
收藏 10

插件: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,具体可查源码。

© 著作权归作者所有

上一篇: WSDL简介
下一篇: Flexpaper 参数说明
青V芒
粉丝 1
博文 11
码字总数 4957
作品 0
杭州
程序员
私信 提问
20+ 个很棒的 jQuery 文件上传插件或教程

文件上传是网站很常见的功能之一,通过使用 jQuery 可以让上传过程更加人性化,更好的用户体验。本文介绍20个jQuery的文件上传插件,其中有一些是教程。 1. Plupload Plupload 是一个Web浏览...

红薯
2011/08/03
50.6K
9
7 款 JavaScript 的 Ajax 文件上传插件

jQuery File Upload jQuery File Upload 是一个Jquery图片上传组件,支持多文件上传、取消、删除,上传前缩略图预览、列表显示图片大小,支持上传进度条显示;支持各种动态语言开发的服务器端...

oschina
2012/05/09
26.2K
13
想在在zframe中添加上传插件,请问用哪一种前端插件比较适合。

@曾超0215 你好,想跟你请教个问题: 我想在zframe中添加上传功能,我原先使用form标签上传,可是它总是刷新页面,我不打算再使用。 我想用js上传文件,可是我用过jquery-form.js和jquery-up...

Javadreamgirl
2016/03/03
240
2
基于jQuery很牛X的批量上传插件

上传功能应该是每个网站必备的工具之一,因此出现了出现了很多各式各样的上传插件! 本文基于个人经验和使用从插件的:交互体验,易用性,文档,美观度出发,为大家推荐三款很NX的批量上传插件...

voole
2013/11/16
15.9K
0
2009 年度最佳 jQuery 插件

jQuery 是个宝库,而 jQuery 的插件体系是个取之不竭的宝库,众多开发者在 jQuery 框架下,设计了数不清的插件,jQuery 的特长是网页效果,因此,它的插件库也多与 UI 有关。本文是 webdesig...

红薯
2009/12/12
2.1K
0

没有更多内容

加载失败,请刷新页面

加载更多

最简单的获取相机拍照的图片

  import android.content.Intent;import android.graphics.Bitmap;import android.os.Bundle;import android.os.Environment;import android.provider.MediaStore;import andr......

MrLins
今天
6
0
说好不哭!数据可视化深度干货,前端开发下一个涨薪点在这里~

随着互联网在各行各业的影响不断深入,数据规模越来越大,各企业也越来越重视数据的价值。作为一家专业的数据智能公司,个推从消息推送服务起家,经过多年的持续耕耘,积累沉淀了海量数据,在...

个推
今天
10
0
第三方支付-返回与回调注意事项

不管是支付宝,微信,还是其它第三方支付,第四方支付,支付机构服务商只要涉及到钱的交易都要进行如下校验,全部成功了才视为成功订单 1.http请求是否成功 2.校验商户号 3.校验订单号及状态...

Shingfi
今天
5
0
简述Java内存分配和回收策略以及Minor GC 和 Major GC(Full GC)

内存分配: 1. 栈区:栈可分为Java虚拟机和本地方法栈 2. 堆区:堆被所有线程共享,在虚拟机启动时创建,是唯一的目的是存放对象实例,是gc的主要区域。通常可分为两个区块年轻代和年老代。更...

DustinChan
今天
7
0
Excel插入批注:可在批注插入文字、形状、图片

1.批注一直显示:审阅选项卡-------->勾选显示批注选项: 2.插入批注快捷键:Shift+F2 组合键 3.在批注中插入图片:鼠标右键点击批注框的小圆点【重点不可以在批注文本框内点击】----->调出批...

东方墨天
今天
7
1

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部