<table><tr><td><input type="file" name="sdfFile" id="sdfFile" value="" οnchange="f_change(this);" ></td><td><img alt="图片" src="" id="imgSdf"></td></tr>
</table>
<script type="text/javascript">
//JS file 图片 即选即得 显示
//创建一个FileReader对象
var reader = new FileReader();
function f_change(file){var img = document.getElementById('imgSdf');//读取File对象的数据reader.onload = function(evt){//data:img base64 编码数据显示img.width = "100";img.height = "100";img.src = evt.target.result;}reader.readAsDataURL(file.files[0]);
}</script>
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/webpage/include/taglib.jsp"%>
<html>
<head>
<title>Logo</title>
<meta name="decorator" content="default"/>
<style>
.top-left {background: rgb(100, 100, 100);float: left;
}
</style>
<script type="text/javascript" src="${ctxStatic}/ajax-fileupload/ajaxfileupload.js"></script>
<script type="text/javascript">
$(document).ready(function() {});function addFile(file){var MAXWIDTH = 260; var MAXHEIGHT = 180;var div = document.getElementById('preview');console.log(file);if(file.value ==null || file.value == '' ||file.value ==undefined ){$("#imghead").attr("src","");}if (file.files && file.files[0]){div.innerHTML ='<img id=imghead>';var img = document.getElementById('imghead');img.onload = function(){var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);img.width = rect.width;img.height = rect.height;//img.style.marginTop = rect.top+'px';}var reader = new FileReader();reader.onload = function(evt){img.src = evt.target.result;}reader.readAsDataURL(file.files[0]);}else{//兼容IEvar sFilter='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';file.select();var src = document.selection.createRange().text;div.innerHTML = '<img id=imghead>';var img = document.getElementById('imghead');img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);status =('rect:'+rect.top+','+rect.left+','+rect.width+','+rect.height);div.innerHTML = "<div id=divhead style='width:"+rect.width+"px;height:"+rect.height+"px;margin-top:"+rect.top+"px;"+sFilter+src+"\"'></div>";}
}function clacImgZoomParam( maxWidth, maxHeight, width, height ){var param = {top:0, left:0, width:width, height:height};if( width>maxWidth || height>maxHeight ){rateWidth = width / maxWidth;rateHeight = height / maxHeight;if( rateWidth > rateHeight ){param.width = maxWidth;param.height = Math.round(height / rateWidth);}else{param.width = Math.round(width / rateHeight);param.height = maxHeight;}}param.left = Math.round((maxWidth - param.width) / 2);param.top = Math.round((maxHeight - param.height) / 2);return param;
}//上传
function startUpload(){var logoFile = $("#logoFile").val();if(logoFile != null && logoFile != ''){$.ajaxFileUpload({url:'${ctx}/repair/dbRepair/logoUploadEdit', //用于文件上传的服务器端请求地址secureuri: false, //是否需要安全协议，一般设置为falsefileElementId: 'logoFile', //文件上传域的ID//dataType: 'json', //返回值类型 一般设置为jsonsuccess: function (data){//服务器成功响应处理函数var infoArray = eval("("+data+")"); //包数据解析为json格式//var arr = infoArray.data;//$("#imghead").attr("src","${webConfig.urlHuluResource}"+arr.photo);$("#successId").html('<span style = "color:green;">LOGO上传成功!</span>');},error: function (){//服务器响应失败处理函数alert('与服务器通信失败，请稍后再试！');parent.location.reload();}});}else{top.layer.alert('没有选择Logo图片!', {icon: 0, title:'提示'});}
}</script>
</head>
<body><table class="table table-condensed dataTables-example dataTable"><tbody><tr><td class="width-15 active"><div class="btn-group" style="float:left;margin-left: 25px;"><div class="btn btn-white btn-sm" style="position:relative; overflow: hidden;background-color:#39daae;color: #ffffff;width: 100%;margin-left:15px"><span>+添加照片</span><input id="logoFile" type="file" name="photoFile" οnchange="addFile(this);" style="height:34px;position: absolute; right: 0px; top: 0px; margin: 0px; padding: 0px; cursor: pointer; opacity: 0;"></div></div><span style="float:left; margin-left:15px; color:#888888;"><ul><li>支持JPG、JPEG、PNG、BMP，大小不超过10M</li></ul></span></td><td class="width-35 active"><div class="top-left" id="preview"><img src="${companyLogo}" alt="logo" id="imghead" style="width: 100%;height: 100%;margin:auto;"></div></td></tr><tr><td colspan= "2" ><hr></td></tr><tr><td class="width-15 active"><div id= "successId" style="margin-left:40px;"><!-- 上传成功提示 --></div></td><td class="width-35" ></td></tr><tr><td class="width-15 active"><div class="btn-group" style="margin-left:40px;"><button type="button" class="btn btn-white btn-sm" id = "" style="background-color:#39daae;width:100%;color:#ffffff;"οnclick="startUpload();" title="开始上传">开始上传</button></div></td><td class="width-35" ></td></tr></tbody></table>
<table><tr><td><input type="file" name="sdfFile" id="sdfFile" value="" οnchange="f_change(this);" ></td><td><img alt="图片" src="" id="imgSdf"></td></tr>
</table><script type="text/javascript">
//JS file 图片 即选即得 显示
//创建一个FileReader对象
var reader = new FileReader();
function f_change(file){var img = document.getElementById('imgSdf');//读取File对象的数据reader.onload = function(evt){//data:img base64 编码数据显示img.width = "100";img.height = "100";img.src = evt.target.result;}reader.readAsDataURL(file.files[0]);
}</script></body>
</html>
