×

记一个通用上传插件,多文件或者单文件上传

我的笔记 我的笔记 发表于2018-12-28 15:31:07 浏览3215 评论0

抢沙发发表评论

背景:

    由于项目过老,我们公司项目以前的上传全部是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">
						&nbsp;
						<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";
	}


我的笔记博客版权我的笔记博客版权