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

来源:互联网 发布:2016mac qq截图不行 编辑:程序博客网 时间:2024/05/02 06:12

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) {   //当点击文件队列中文件的关闭按钮或点击取消上传时触发            }        });

  • onComplete事件使用详细说明:http://blog.csdn.net/hutao1101175783/article/details/11616309
  • jquery上传插件Uploadify3.2中文详细参考手册:http://wenku.baidu.com/link?url=q-TnkpjDuRqC6HX-AfA87lEFh_3RQAMaRwhkG-v6RqRc2rNeB85YySieuOKwwRPolMeKLETSXg1c4IC10eOZTIhYuQvaMAHEgN6fN4a2Jda&qq-pf-to=pcqq.c2c
0 0
原创粉丝点击