<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{
//兼容IE
var 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, //是否需要安全协议,一般设置为false
fileElementId: 'logoFile', //文件上传域的ID
//dataType: 'json', //返回值类型 一般设置为json
success: 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>