記錄本身的上傳頭像功能

時間  2019-11-20
標籤 記錄 本身 上傳 頭像 功能 简体版
原文   原文鏈接

jspcss

<style type="text/css">
		#t1{border:solid #F3F3F3; border-width:1px 0px 0px 1px;}
		#t1 tr{height:35px}
		#t1 td{border:solid #F3F3F3; border-width:0px 1px 1px 0px;}
		#td_l{background-color:#F3F3F3;text-align: right;}
    	.datagrid-row:nth-child(2n){
		    background:#FFFFFF;
		}
		.upload-img{
			position: relative;
			float: left;
			margin: 0px;
			overflow: hidden;
		}
		.upload-img img{
			width: 230px;
			height: 160px;
		}
		.comment-pic-upd{
			position: absolute;
			top: 0;
			left: -80;
			z-index: 100;
			width: 230px;
			height: 160px;
			filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
			filter:alpha(opacity=0);
			-moz-opacity:0;
			-khtml-opacity: 0;
			opacity:0;
			background: none;
			border: none;
			cursor: pointer;
		}
	</style>
	
	</head>
	<body >
		<div id="container" class="main" >
			<div class="barTitle">
				<div class="content"><span>修改人員</span>
				<div class="btn_div" style="float:right;margin:5px;line-height:0;">
				<input type="button" class="returnlist_btn" value="" onclick="_back()"/>
					</div> 
				</div>
			</div>
		
	<form name="myForm" method="post" enctype="multipart/form-data" style="margin:0px">	
		<table border="0" cellspacing="5px;" cellpadding="0" style="margin-top:0px;">
			<tr>
				<td align="right" width="120px;">姓名： 
					<input type="hidden"  id="personuuid" name="personuuid" value="${info.PERSONUUID }" />
				</td>
				<td width="380px;"><input id="username"type="text"  name="username" readonly value="${info.USER_NAME}" style="width:170px;height:30px;vertical-align:middle;" />
				 <!-- <input type="button"  class="checkPer_btn" onclick="checkPer()"  style="vertical-align: middle;"/> -->
				</td>
				<td align="right" width="120px;">單位： </td>
				<td width="180px;">	
				<input id="unitname"type="text"  name="unitname" readonly value="${info.UNIT_NAME}" style="width:170px;height:30px;vertical-align:middle;" />
				</td>	
				<td width="120px;" align="right" >性別：</td>
				<td width="180px;" ><select style="width: 175px;height: 38px;" id="sex" name="sex">
				<option value="1" ${info.SEX=="1"?"selected":""} >男</option>
				<option value="2" ${info.SEX=="2"?"selected":""}>女</option>
				</select>
				</td>
			</tr>
			<tr>
			<td align="right" valign="top">我的照片:</td>
			<td class="td_l"  align="left">
						<div style="width:230px;height:160px;">
	         				<div id="imgDiv" class="upload-img" style="height:100%;">
	           					<input type="file" id="employeePhoto" name="employeePhoto" class="comment-pic-upd" onchange="addEmployeePhoto()" />
								<c:choose>
									<c:when test="${flag=='no'}">
								<img id="employeeImg" src="<%=contextPath%>/include/images/addPer.png" alt="上傳照片" title="">
									</c:when>
								</c:choose>
								<c:choose>
									<c:when test="${flag=='ok'}">
								<img id="employeeImg" src="<%=contextPath%>/check/enforcement_getImg.do?url=${picInfo.URL}" alt="${picInfo.FILE_NAME }" title="">
									</c:when>
								</c:choose>
							</div>
		            	</div>
					</td>
			</tr>
			<tr>
			<td colspan="6">
				<div class="" id="pagetitle" align="center">
					<div class="btn_div" style="line-height:0;">
				   	    <input type="button" id="btnBatchPass" class="confirm_btn" value="肯定" onclick="_confirm()" style="vertical-align: middle;"/>
						<input type="button" id="btnBatchReturn" class="close_btn" value="返回" onclick="_back()" style="vertical-align: middle;"/>
					</div>
				</div>
			</td>
			</tr>
	</table>
	</form>

jshtml

/*****************上傳照片******************/
function addEmployeePhoto(){
	var file = document.getElementById("employeePhoto");
	var pic = document.getElementById("employeeImg");
	//var bannerPic = document.getElementById("shopBannerImg");
	imgUpload(file, pic);
	//imgUpload(file, bannerPic);
	
}
function imgUpload(file, pic){
	var ext = file.value.substring(file.value.lastIndexOf(".") + 1).toLowerCase();
	// gif在IE瀏覽器暫時沒法顯示
	if (ext != 'png' && ext != 'jpg' && ext != 'jpeg') {
		$.messager.alert('消息提示','圖片的格式必須爲png或者jpg或者jpeg格式！', 'info');  
		return false;
	}
	var isIE = navigator.userAgent.match(/MSIE/) != null,
	isIE6 = navigator.userAgent.match(/MSIE 6.0/) != null;
	
	if (isIE) {
		file.select();
		var reallocalpath = document.selection.createRange().text;
		// IE6瀏覽器設置img的src爲本地路徑能夠直接顯示圖片
		if (isIE6) {
			pic.src = reallocalpath;
		} else {
			// 非IE6版本的IE因爲安全問題直接設置img的src沒法顯示本地圖片，可是能夠經過濾鏡來實現
			pic.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src=\"" + reallocalpath + "\")";
			// 設置img的src爲base64編碼的透明圖片 取消顯示瀏覽器默認圖片
			pic.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==';
		}
	} else {
		html5Reader(file, pic);
	}
}

function html5Reader(file, pic) {
	var file = file.files[0];
	var reader = new FileReader();
	reader.readAsDataURL(file);
	reader.onload = function(e) {
		pic.src = this.result;
	}
}
/保存/
function _confirm(){
var url = 'enforcement_modify.do';
	myForm.action=url;
	myForm.submit();
}

後臺Actionhtml5

private File employeePhoto;
	private String employeePhotoFileName;
	
	public File getEmployeePhoto() {
		return employeePhoto;
	}


//修改保存的方法
@SuppressWarnings({ "unused", "rawtypes" })
	public String modify(){
		try {
			String personuuid=request.getParameter("personuuid");
			File employeeFile = getEmployeePhoto();
			String photoUUID =personuuid;
			String url="";
			if (employeeFile != null) {//圖片存在
				String photoName =  getEmployeePhotoFileName();
				String exp = photoName.substring(photoName.lastIndexOf("."),photoName.length());
				//photoUUID = KeyUtil.uuid();
				String rootPath = SaveAndroidSubmitFileUtil.FILE_PATH;
            	String employeePath = Configuration.getString("unLicense_shopPic") + DateUtil.getCurrentDate("yyyyMMdd") + "/employeePic/";
            	File pathDir = new File(rootPath + employeePath);
				if (!pathDir.exists() || pathDir == null) {
					// 判斷指定路徑dir是否存在，不存在則建立路徑
					pathDir.mkdirs();
				}
                FileOutputStream fos = new FileOutputStream(rootPath + employeePath + File.separator + photoUUID + exp);
                FileInputStream fis = new FileInputStream(employeeFile);
                byte[] buffer = new byte[1024];
                int len = 0;
                while ((len = fis.read(buffer)) > 0) {
                    fos.write(buffer, 0, len);
                }
                fis.close();
                fos.close();
                Map m = new HashMap();
                m.put("uuid", personuuid);
                m.put("groupUUID", personuuid);
                m.put("name", photoName);
                m.put("type", "0");
                m.put("url", employeePath+photoUUID+exp);
                m.put("isVaild", "1");
                enforcementService.updateNoCardCustomerPicGroup(m);
	        }	
			String unitname=request.getParameter("unitname");
			String sex=request.getParameter("sex");
			String ident=request.getParameter("ident");
			String birthDay=request.getParameter("birthDay");
			String mobile=request.getParameter("mobile");
			String lawno=request.getParameter("lawno");
			String lawstation=request.getParameter("lawstation");
			String skilllevel=request.getParameter("skilllevel");
			String other=request.getParameter("other");
			Map map=new HashMap();
			map.put("personuuid", personuuid);
			map.put("unitname", unitname);
			map.put("sex", sex);
			map.put("ident", ident);
			map.put("birthDay", birthDay);
			map.put("mobile", mobile);
			map.put("lawno", lawno);
			map.put("lawstation", lawstation);
			map.put("skilllevel", skilllevel);
			map.put("other", other);
			enforcementService.modify(map);
		} catch (Exception e) {
			LogUtil.error(e);
			e.printStackTrace();
		}
		return "initUI";
	}



/**
	*@ title：查詢我的圖片---用於展現圖片---前臺jsp的img標籤訪問該方法
	*@ Description: 組建json構建頁面列表
	*@ param: null
	*@ return null
	*@ throw 異常
	*@ author:lixy
	*@ date:2016-1-5
	*@ modify Description 修改內容描述
	*@ modify man:修改人
	*@ modify date:修改時間（yyyy-MM-dd）
	*/
	public void getImg() {
		InputStream inputstreamt = null;
        BufferedInputStream bufferedinputstream = null;
		try {
			String rootPath = SaveAndroidSubmitFileUtil.FILE_PATH;
			String url = new String(request.getParameter("url").getBytes("ISO-8859-1"),"UTF-8");
			String path = rootPath + url;
			System.out.println("------path---------"+path);
			File file1 = new File(path);
			inputstreamt = new FileInputStream(file1); 
			bufferedinputstream = new BufferedInputStream(inputstreamt);
			ByteArrayOutputStream bytearrayoutputstream = new ByteArrayOutputStream();
            BufferedOutputStream bufferedoutputstream = new BufferedOutputStream(bytearrayoutputstream);
            for(int i = -1; (i = bufferedinputstream.read()) != -1;){
                bufferedoutputstream.write(i);
            }
            bufferedoutputstream.flush();
            bytearrayoutputstream.flush();
            response.getOutputStream().write(bytearrayoutputstream.toByteArray());
            response.flushBuffer();
		} catch (Exception ex) {
			LogUtil.error(ex);
		}finally{
            try{
                if(inputstreamt != null){inputstreamt.close();}
                if(bufferedinputstream != null){bufferedinputstream.close();}
            }catch(Exception e){
            	LogUtil.error(e);
            }
        }
	}
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程