基于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示例见附件图片，上传时可以展示出上传进度条，同时也可以在上传过程中取消文件上传；