上传插件Uploadify在Struts2的应用详细介绍

最新推荐文章于 2020-05-15 07:08:38 发布

Simplxs

最新推荐文章于 2020-05-15 07:08:38 发布

阅读量535

点赞数

分类专栏： javascript 文章标签： struts2.0 插件 Uploadify jquery

本文链接：https://blog.csdn.net/Simplxs/article/details/49275891

版权

javascript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1、http://www.uploadify.com/ 在官网下载Uploadify的Api以及其工具包文件。
2、下载完之后解压工具包文件并拷贝到工程文件下。
3、参考Uploadify API
4、搭建
引入js，css文件：

<link href="<%=path%>/js/uploadify/uploadify.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="<%=path%>/js/uploadify/uploadify.js"></script>
<script type="text/javascript" src="<%=path%>/js/uploadify/swfobject.js"></script>

写入html代码：

<div style="height:480px;width:140px;border-top: 2px solid #696969;border-right: 2px solid #696969;border-bottom: 2px solid #696969;">
    <div style="font-family:'微软雅黑';font-weight:bolder; font-size: 18px;">附件</div>
    <div id="fileQueue"></div>
    <input type="file" name="fileInput" id="electronOther"/>
</div>

写入uploadify插件：

$('#electronOther').uploadify({
        'uploader': '<%=path%>/js/uploadify/uploadify.swf',
            'script': '<%=path%>/file/uploadFile!uploadFile.action',    //指定服务端处理类的入口
        'cancelImg' : '<%=path%>/js/uploadify/cancel.png',  //取消按钮
            'queueID': 'fileQueue', //表示上传队列的DOM元素的ID号
            'fileDataName': 'fileInput',//和input的name属性值保持一致
            'auto': true,//是否选取文件后自动上传   
            'multi': true,//是否支持多文件上传
            'simUploadLimit' : 5,//每次最大上传文件数
            'removeCompleted' : true,   //不设置该选项或者将其设置为false，将使上传队列中的项目始终显示于队列中，直到点击了关闭按钮或者队列被清空。 
//          'buttonText': 'UPLOAD',//按钮上的文字
        'buttonImg':'<%=path%>/js/uploadify/upload.png',    //设置上传按钮背景图片
        'wmode': 'transparent', //设置该项为transparent 可以使浏览按钮的flash背景文件透明，并且flash文件会被置为页面的最高层
//          'hideButton': true,
            'width': 72,
        'height': 22,
            'displayData': 'percentage', //有speed和percentage两种，一个显示速度，一个显示完成百分比
            'scriptData': {'Id':$('#Id').val()},   //向后台传值
            'onComplete': function(event, ID, fileObj, response, data) {    //文件上传完成后触发

            },
            'onCancel': function(event,ID,fileObj,data) {   //当点击文件队列中文件的关闭按钮或点击取消上传时触发

            }
        });