基于jquery+flash的文件上传组件uploadify使用

1、从http://www.uploadify.com/download/下载uploadify包；

2、将uploadify包解压后放到web应用相应js目录；

3、在页面中应用相关js、css文件；

<link href="${ctx}/jquery/uploadify/uploadify.css" mce_href="${ctx}/jquery/uploadify/uploadify.css" type="text/css" rel="stylesheet" /><mce:script type="text/javascript" src="${ctx}/jquery/uploadify/jquery-1.4.2.min.js" mce_src="${ctx}/jquery/uploadify/jquery-1.4.2.min.js"></mce:script><mce:script type="text/javascript" src="${ctx}/jquery/uploadify/swfobject.js" mce_src="${ctx}/jquery/uploadify/swfobject.js"></mce:script><mce:script type="text/javascript" src="${ctx}/jquery/uploadify/jquery.uploadify.v2.1.4.min.js" mce_src="${ctx}/jquery/uploadify/jquery.uploadify.v2.1.4.min.js"></mce:script><mce:script type="text/javascript"><!--$(document).ready(function() {$("#uploadify").uploadify({ 'uploader': '${ctx}/jquery/uploadify/uploadify.swf', 'script': '${ctx}/mtl!uploadImg.action;jsessionid=<%=session.getId()%>', 'cancelImg': '${ctx}/jquery/uploadify/cancel.png', 'folder': 'UploadFile', 'queueID': 'fileQueue', 'auto': false, 'multi': false, 'fileExt':'*.jpg;*.jpeg;*.bmp;*.gif', 'fileDesc':'Image Files', 'queueSizeLimit':5, 'buttonImg':'${ctx}/jquery/uploadify/selfile.png', 'width':88, 'height':20, 'wmode':'transparent', 'onComplete':function(event, id, fileObj, response, data) { //alert("上传成功" + response + "/n" + fileObj.name + "/n" + fileObj.filePath + "/n" + fileObj.size // + fileObj.creationDate + "/n" + fileObj.modificationDate + "/n" + fileObj.type); var obj = $.parseJSON(response); if(obj) { if(obj.flag=='1') {insertImg(obj.msg); } else { $.messager.alert('提示', obj.msg + '，请重试','warning'); } } else { $.messager.alert('提示','服务器异常，请重新上传','warning'); } }, 'onQueueFull':function() { $.messager.alert('提示','对不起，一次上传文件数不能超过5个','warning'); return false; } });//上传图片$("#bt_upload_file").click(function() {var mtlType = $('#selImgWin').data("mtlType");if(!mtlType) {//默认为图片mtlType = "3";}if($("#chk_upload_to_mtllib").attr("checked")) {$('#uploadify').uploadifySettings("scriptData", {"type":mtlType, "uploadToMtlLib":"1","userId":"<s:property value='#session.USER.id'/>"});} else {$('#uploadify').uploadifySettings("scriptData", {"type":mtlType, "uploadToMtlLib":"0"});}$('#uploadify').uploadifyUpload();});$("#bt_upload_file_cancel").click(function() {$('#uploadify').uploadifyClearQueue();});});// --></mce:script>在页面body中加入<div id="dv_upload_img"> <div class="file_upload_button"> <input type="file" name="uploadify" id="uploadify" /> <button class="button_big upload-button-1" id="bt_upload_file" type="button">开始上传</button> <button class="button_big upload-button-2" id="bt_upload_file_cancel" type="button">取消上传</button> <span style="position:absolute;top:2px;right:2px;text-align:center;vertical-align:middle;font-family:tahoma;"> <input type="checkbox" name="chk_upload_to_mtllib" id="chk_upload_to_mtllib" value="1"/> <label for="chk_upload_to_mtllib">上传至素材库</label> </span> </div> <div id="fileQueue" class="file_upload_queue"></div> <br/></div>

4、java代码中使用struts2提供的文件拦截器处理文件，在Action类中添加如下代码，然后对文件进行相应的处理：

private File filedata;/** * @return the filedata */public File getFiledata() {return filedata;}/** * @param filedata the filedata to set */public void setFiledata(File filedata) {this.filedata = filedata;}

注意：上传的文件对象命名为filedata，不能改为其他名称；

5、DEMO示例见附件图片，上传时可以展示出上传进度条，同时也可以在上传过程中取消文件上传；