背景:
由于项目过老,我们公司项目以前的上传全部是Flash,最近这两年听说Chrome慢慢在取消flash支持。这就可能导致我们的文档上传不能使用。在这种情况下,有必要把Flahs文件上传改成H5上传。这里用到的H5插件是WebUploader,下载地址:http://fex.baidu.com/webuploader/document.html
首先,页面开始改造:
1、页面:commonUpload.jsp
<link href="<s:url value="/js/webuploader/css/webuploader.css" />" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="<s:url value="/js/webuploader/js/webuploader.min.js" />"> </script>
<script type="text/javascript" src="<%=path %>/sequoia/commonUploadFile/js/CommonUploadFileH5.js"></script>
这三个文件引入。前两个是压缩包里。最后一个是我们公司写的工具,我写在页面下边
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="s" uri="/struts-tags"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <s:component template="commonHead.ftl"> <s:param name="title"></s:param> <s:param name="style">false</s:param> </s:component> <link href="<s:url value="/js/webuploader/css/webuploader.css" />" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="<s:url value="/js/commonCRUDMethod.js"/>"></script> <script type="text/javascript" src="<s:url value="/js/webuploader/js/webuploader.min.js" />"> </script> <script type="text/javascript" src="<%=path %>/sequoia/commonUploadFile/js/CommonUploadFileH5.js"></script> <script> var confrim_data_error = '<s:text name="dataErrorEnterAgain"></s:text>'; var commonCRUDMethod; var fund; //出资主体 $(function(){ commonCRUDMethod = new CommonCRUDMethod(); fund = new Fund(); }); $(document).ready(function() { }); //添加文档 function insertDocFund() { var flag = true; var fdocTypeId = document.getElementById("fdocTypeId"); if (!isMust(fdocTypeId, true)) { flag = false; } var options = { beforeSubmit : beforeEditSubmit, success : WordFirstFormResponse, dataType : "json" }; $("#DocFundAdd").ajaxSubmit(options);//提交这个actionform } //动作执行完成后的返回执行函数 function WordFirstFormResponse(responseText, statusText, xhr, $form) { hideLoading(); var message = responseText.message; var result = responseText.result; if (result == "success") { $.prompt(message, { callback : function(v, m) { var searchDocumentOfProjectBtn = window.parent.document.getElementById("searchDocumentOfProjectBtn"); $(searchDocumentOfProjectBtn).click(); removeDailog(); } }); } else { $.prompt(message); } } </script> </head> <body> <form name="DocFundAdd" id="DocFundAdd" action="docFund/DocFundAdd.action" method="post"> <input type="hidden" id="path" value="<%=path %>"> <s:hidden name="documentFund.ffundId"/> <input type="hidden" name="documentFund.fdocId" id="documentFund.fdocId" value="<s:property value='documentFund.fdocId' />"> <table width="99%" id="addWordFirst" class="form-table" cellspacing="0" cellpadding="0" border="0"> <tr> <td nowrap align="right"><font color="red">*</font>文档类型:</td> <td nowrap align="left"> <s:select name="documentFund.fdocTypeId" id="fdocTypeId" list="getFundDocType" listKey="key" listValue="value" ></s:select> </td> </tr> <s:if test="getSpvList.size>0"> <tr> <td nowrap align="right">SPV列表:</td> <td nowrap align="left"> <s:select name="documentFund.ffundSpvId" id="ffundSpvId" list="getSpvList" listKey="key" listValue="value" ></s:select> </td> </tr> </s:if> <tr> <td nowrap align="right">描述:</td> <td nowrap align="left"> <s:textarea rows="3" cols="50" id="documentFund.fremark" name="documentFund.fremark" ></s:textarea> </td> </tr> <tr> <td nowrap align="right"> <s:text name="file"/>: </td> <td colspan="1" nowrap align="left"> <input type="hidden" name="word.vcdocpath" id="word.vcdocpath" value="<s:property value='word.vcdocpath' />"> <!-- 修改后 --> <!-- 文件名称 --> <input type="hidden" name="word.docname" id="word.docname" value="<s:property value='word.docname' />"> <script type="text/javascript"> $(document).ready(function() { var po = '<s:property value='po' />'; CommonUploadFileH5.uploadifyH5({ dom: { id:'#uploadify', multiple: false //true为多选 }, selectId:'vcDocName',// uploadifySelect params: { projectid: '<s:property value="documentFund.ffundId" />', tname: '<s:property value="documentFund.fdocTypeId" />' } }); }); </script> <div id="uploadify"> 选择文件 </div> </tr> <tr> <td nowrap align="right"> <s:text name="fileName"/>: </td> <s:if test='word != null'> <td nowrap align="left" colspan="3"> <input type="text" name="word.vcdocname" id="vcDocName" readonly="readonly" class="textField" style="width:200px;" value="<s:property value='word.vcdocname' />"> </td> </s:if> <s:else> <td nowrap align="left" colspan="3"> <div style="float:left;"> <div class="team_user_outDiv"> <div class="team_user_div" style="width:300px;border: 0px!important;background: none;"> <%-- <select id="uploadifySelect" multiple="multiple" onchange="selectOption(this)"> </select> --%> <input type="text" name="word.vcdocname" disabled="disabled" id="vcDocName" style="margin-top:20px;" > </div> </div> <s:hidden name="word.vcdocname" id="vcDocName"/> </div> <div id="delFile" class="del-file-btn webuploader-pick" style="margin-left:-120px; margin-top:18px" > 删除 </div> <script type="text/javascript"> $("#delFile").click(function(){ $("#vcDocName").val(""); }); </script> <div style="clear: both;"></div> </td> </s:else> </tr> <tr> <td colspan="4"> <input id="submitFo" type="button" value="<s:text name="save"/>" class="search_button" onClick="insertDocFund()" /> </td> </tr> </table> </form> </body> </html>
2、JS脚本:CommonUploadFileH5.js
var CommonUploadFileH5 = function() { var uploadifyH5 = function(options) { var path = $("#path").val(); var swfPath = path + "/js/webuploader/Uploader.swf"; var sessionId = $("#sessionId").val(); var defaultRequestPath = path + '/invest/word/updateFileH5.action;jsessionid=' + sessionId; // 指定允许可选文件的后缀 var fileExt = "gif,jpg,jpeg,bmp,png,rar,zip,ppt,pptx,doc,docx,xls,xlsx,pdf,msg,txt,7z,html"; // 指定文件类型 var fileMime = '*'; //默认参数设置 var defaults = { dom: { id:'#uploadify', multiple: false //true为多选 }, uploadUrl: defaultRequestPath, fileVal: 'uploadify',//文件域 selectId:'uploadifySelect',// 文件名称列表 delBtn: '#delFileBtn',// 删除按钮 duplicate: true,// 是否不允许重复,true不允许,false允许 replace: false, params: { projectid:'', tname:'default' }, fn: { success : CommonUploadFileH5.defaultUploadSuccess, error : CommonUploadFileH5.defaultUploadError, complete : CommonUploadFileH5.defaultUploadComplete, del: CommonUploadFileH5.defaultUploadDelFile }, mineType: { fileExt: '', fileMime: '' } }; // 继承默认的参数 var option = $.extend({}, defaults, options || {}); var _fileExt = option.mineType.fileExt; var _fileMime = option.mineType.fileMime; if(!option.replace) { option.mineType.fileExt = (_fileExt.length != 0 ? fileExt + "," + _fileExt : fileExt); option.mineType.fileMime = (_fileMime.length != 0 ? fileMime + "," + _fileMime : fileMime); } if (!WebUploader.Uploader.support()) { $.prompt( 'Web Uploader 不支持您的浏览器!如果你使用的是IE浏览器,请尝试升级 flash 播放器'); throw new Error( 'WebUploader does not support the browser you are using.' ); } // 初始化文件上传设置 var uploader = WebUploader.create({ auto: true, // 选完文件后,是否自动上传 swf: swfPath, // swf文件路径 server: option.uploadUrl, // 文件接收服务端 pick: option.dom, // 选择文件的按钮。可选 formData: option.params,//自定义参数与 fileVal: option.fileVal,// 设置文件上传域的name duplicate: option.duplicate, accept: { title: '自定义文件', extensions: option.mineType.fileExt, mimeTypes: option.mineType.fileMime } }); // 上传成功 uploader.on('uploadSuccess', function(file, res) { option.fn.success(file, res, option.selectId, option.dom.multiple); }); // 文件上传失败,显示上传出错。 uploader.on('uploadError', function(file) { option.fn.error(file); }); //上传完成 uploader.on('uploadComplete', function(file) { option.fn.complete(file); }); //上传错误 uploader.on("error",function (type){ var msg = ""; if (type == "Q_TYPE_DENIED"){// 文件格式 msg = "请上传[" + option.mineType.fileExt + "]格式文件"; $.prompt(msg); } else if(type=="F_EXCEED_SIZE"){ } }); //删除按钮鼠标移入移出时样式改变 $(option.delBtn).hover(function() { $(this).addClass("webuploader-pick-hover"); },function() { $(this).removeClass("webuploader-pick-hover"); }); //删除点击事件 $(option.delBtn).click(function() { option.fn.del(this, option.selectId, uploader); }); }; /** * 默认上传成功回调方法 */ var defaultUploadSuccess = function(file, res, selectId, multi, uploader) { var result = res.result; if(result == "success") { // 操作 var po = $("#po").val(); try { var formId = $("#" + selectId).closest("form").attr("id"); var name = file.name; var newPath = res.extPath + res.newFileName; CommonUploadFileH5.commonCallBack(multi, formId, selectId, name, newPath); } catch (e) { } } }; var commonCallBack = function(multi, formId, selectId, name, newPath) { if(multi) { var docName = $("#" + formId + " *[id*='vcDocName']").val(); if (docName != "") { $("#" + formId + " *[id*='word.docname']").val(docName + "::" + name); $("#" + formId + " *[id*='vcDocName']").val(docName + "::" + name); } else { $("#" + formId + " *[id*='word.docname']").val(name); $("#" + formId + " *[id*='vcDocName']").val(name); } var docPath = $("#" + formId + " *[id*='word.vcdocpath']").val(); if (docPath != "") { $("#" + formId + " *[id*='word.vcdocpath']").val(docPath + "::" + newPath); } else { $("#" + formId + " *[id*='word.vcdocpath']").val(newPath); } $("#" + formId + " *[id*='" + selectId + "']").append("<option value='" + newPath + "'>" +name + "</option>"); } else { $("#" + formId + " *[id*='" + selectId + "']").val(name); $("#" + formId + " *[id*='word.vcdocpath']").val(newPath); $("#" + formId + " *[id*='word.docname']").val(name); } } /** * 默认上传失败回调方法 */ var defaultUploadError = function(file) { $.prompt("上传失败!"); }; /** * 默认上传完成回调方法 */ var defaultUploadComplete = function(file) { }; /** * 默认删除文件 */ var defaultUploadDelFile = function(obj, selectId, uploader) { var po = $("#po").val(); var formId = $("#" + selectId).closest("form").attr("id"); var options = $("#" + selectId).find("option:selected"); var tempDocNames = ""; var tempDocPaths = ""; if(options.length <= 0) { $.prompt("请至少选择一个文件删除!"); return false; } //遍历选中所有行并删除 options.each(function() { //删除队列中的文件 var index = $(this).index(); //删除下拉列表中的文件 $(this).remove(); var file = uploader.getFiles()[index]; try{ uploader.removeFile(file, true); } catch (e) { } }); // 重新获取下拉列表 options = $("#" + selectId).find("option"); options.each(function() { tempDocNames = tempDocNames + $.trim($(this).text()) + "::"; tempDocPaths = tempDocPaths + $.trim($(this).val()) + "::"; }); if(tempDocNames && tempDocPaths) { tempDocNames = tempDocNames.substring(0, tempDocNames.length - 2); tempDocPaths = tempDocPaths.substring(0, tempDocPaths.length - 2); } $("#" + formId + " *[id*='vcDocName']").val(tempDocNames); $("#" + formId + " *[id*='word.vcdocpath']").val(tempDocPaths); }; return { uploadifyH5 : function(options) { uploadifyH5(options); }, defaultUploadSuccess : function(file, res, selectId, multi, uploader) { defaultUploadSuccess(file, res, selectId, multi, uploader); }, defaultUploadError: function(file) { defaultUploadError(file); }, defaultUploadComplete: function(file) { defaultUploadComplete(file); }, defaultUploadDelFile: function(currentDom, selectId, uploader) { defaultUploadDelFile(currentDom, selectId, uploader); }, commonCallBack: function(multi, formId, selectId, name, newPath) { commonCallBack(multi, formId, selectId, name, newPath); } }; }(window.document);
3、Action后台
/** * 上传文件 * * @return * @throws Exception */ @SuppressWarnings("deprecation") public String updateFileH5() throws Exception { File f = null; HttpServletResponse response = ServletActionContext.getResponse(); response.setCharacterEncoding("utf-8"); savePath = "/"; extName = "";// 扩展名 newFileName = "";// 新文件名 extPath = fileSaver.getFilePath(); savePath = savePath + extPath; savePath = ServletActionContext.getServletContext().getRealPath( savePath); String newPath = savePath; if (projectid == null || projectid.equals("")) { projectid = ""; } else { newPath = newPath + "/" + tname + "/" + projectid; projectid = projectid + "/"; } savePath += "/"; newPath += "/"+tname; try { f = new File(newPath); System.out.println("rongzhen文件夹 ---- " + savePath + tname); if (!f.exists()) { f.mkdirs(); } } catch (Exception e) { System.out.println("rongzhen文件夹创建失败"); return null; } System.out.println("rongzhen开始截取文件路径"); if (!com.datadriver.webservice.util.WebServiceUtils.isEmpty(uploadifyFileName) && uploadifyFileName.lastIndexOf(".") > -1) { extName = uploadifyFileName.substring(uploadifyFileName .lastIndexOf(".")); } System.out.println("rongzhen截取文件路径成功"); String nowTime = new SimpleDateFormat("yyyyMMddHHmmssSSS") .format(new Date());// 当前时间 newFileName = tname + "/" + projectid + nowTime + extName; newFileName = newFileName.trim();//去掉首尾空格 try { uploadify.renameTo(new File(savePath + newFileName)); System.out.println("rongzhen***********文件重名名成功"); //response.getWriter().print(extPath + projectid + newFileName);// 加上项目ID System.out.println("rongzhen***********response返回文件路径"); result = "success"; } catch (Exception e) { System.out.println("rongzhen***********response异常"); result = "failed"; //response.getWriter().print(extPath + projectid + tname + uploadifyFileName);// 加上项目ID } return "success"; }