uploadify2.1.4上传组件应用实例

来源：互联网发布：linux socket编程 udp 编辑：程序博客网时间：2024/05/21 19:24

项目中经常要用到上传组件,我一直在使用uploadify这个组件,感觉挺不错,下面演示下如何使用

1. 先下载uploadify-v2.1.4的包,放到项目里

2. 写调用uploadify的初始化方法

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><link rel="stylesheet" href="/static/plugin/uploadify/uploadify.css"type="text/css" /><script type="text/javascript" src="/static/plugin/jquery/core.js"></script><script type="text/javascript"src="/static/plugin/uploadify/jquery.uploadify.v2.1.4.js"></script> <scripttype="text/javascript" src="/static/plugin/uploadify/swfobject.js"></script><script type="text/javascript">$(function() {jQuery("#filedata").uploadify({'uploader' : '/static/plugin/uploadify/uploadify.swf?ver=' + new Date().getTime(), //是组件自带的flash，用于打开选取本地文件的按钮 /*'buttonImg' : '/plugin/uploadify/upload.jpg','width'  : 120,'height' : 30,*/'wmode' : 'opaque','script' : 'aa.html',//处理上传的路径，这里使用Struts2是XXX.action 'cancelImg' : '/static/plugin/uploadify/cancel.png',//取消上传文件的按钮图片，就是个叉叉'sizeLimit' : 20971520, //允许文件上传的大小  20M'fileDataName' : 'filedata',//和input的name属性值保持一致就好，Struts2就能处理了'queueID' : 'fileQueue','auto' : false,//是否选取文件后自动上传'multi' : true,//是否支持多文件上传'queueSizeLimit' : 5, //默认上传文件数'simUploadLimit' : 5,//每次最大上传文件数'buttonText' : 'UPLOAD FILE',//按钮上的文字'displayData' : 'percentage',//有speed和percentage两种，一个显示速度，一个显示完成百分比 'rollover' : false,'fileDesc' : 'txt.',//'支持格式:jpg/gif/jpeg/png/bmp.', //如果配置了以下的'fileExt'属性，那么这个属性是必须的 'fileExt' : '*.txt',//允许的格式,'*.jpg;*.gif;*.jpeg;*.png;*.bmp' '*.doc;*.pdf;*.rar''onComplete' : function(event, queueID, fileObj,response, data) {setInterval("showResult()", 2000);//三秒后删除显示的上传成功结果},'onSelect' : function(event, queueID, fileObj) {},'onCancel' : function(event, queueId, fileObj, data) {},'onQueueFull' : function(event, data) {}});jQuery("#filedata1").uploadify({'uploader' : '/static/plugin/uploadify/uploadify.swf?ver=' + new Date().getTime(), //是组件自带的flash，用于打开选取本地文件的按钮 /*'buttonImg' : '/plugin/uploadify/upload.jpg','width'  : 120,'height' : 30,*/'wmode' : 'opaque','script' : 'aa.html',//处理上传的路径，这里使用Struts2是XXX.action 'cancelImg' : '/static/plugin/uploadify/cancel.png',//取消上传文件的按钮图片，就是个叉叉'sizeLimit' : 20971520, //允许文件上传的大小  20M'fileDataName' : 'filedata1',//和input的name属性值保持一致就好，Struts2就能处理了'queueID' : 'fileQueue1','auto' : false,//是否选取文件后自动上传'multi' : true,//是否支持多文件上传'queueSizeLimit' : 5, //默认上传文件数'simUploadLimit' : 5,//每次最大上传文件数'buttonText' : 'UPLOAD FILE',//按钮上的文字'displayData' : 'percentage',//有speed和percentage两种，一个显示速度，一个显示完成百分比 'rollover' : false,'fileDesc' : 'txt.',//'支持格式:jpg/gif/jpeg/png/bmp.', //如果配置了以下的'fileExt'属性，那么这个属性是必须的 'fileExt' : '*.txt',//允许的格式,'*.jpg;*.gif;*.jpeg;*.png;*.bmp' '*.doc;*.pdf;*.rar''onComplete' : function(event, queueID, fileObj,response, data) {setInterval("showResult()", 2000);//三秒后删除显示的上传成功结果},'onSelect' : function(event, queueID, fileObj) {},'onCancel' : function(event, queueId, fileObj, data) {},'onQueueFull' : function(event, data) {}});});function uploadFile() {//上传文件jQuery('#filedata').uploadifyUpload();}function cancleUpload() {jQuery('#filedata').uploadifyClearQueue();}function uploadFile1() {//上传文件jQuery('#filedata1').uploadifyUpload();}function cancleUpload1() {jQuery('#filedata1').uploadifyClearQueue();}function up(){alert('触发了表单提交----要先上传完文件才能提交!');uploadFile();uploadFile1();return false;}</script></head><body leftmargin="8" topmargin="8" background=''><form action="aa.html" method="post" onsubmit="return up();"><div><div id="fileQueue"></div><input type="file" name="filedata" id="filedata" /><div id="result"></div><!--显示结果--></div><br /><hr /><div><div id="fileQueue1"></div><input type="file" name="filedata1" id="filedata1" /><div id="result1"></div><!--显示结果--></div><input type="submit" value="提交表单" /></form></body></html>

3. 最后测试页面,有个需要注意的地方,就是上传路径不能有权限控制的,因为uploadify会丢失session,导致后台验证权限失败,建议弄个无权限限制路径上传再移到正规路径下