JS file图片即选即得显示,前端交互图片即选即得

最新推荐文章于 2024-06-25 23:18:38 发布

廿二又

最新推荐文章于 2024-06-25 23:18:38 发布

阅读量5.4k

点赞数 2

分类专栏： web前端文章标签：图片 javascript js 前端交互图片即选即得

本文链接：https://blog.csdn.net/u014596302/article/details/60769870

版权

web前端专栏收录该内容

21 篇文章 0 订阅

订阅专栏

<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>

廿二又

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
JS file图片即选即得显示,前端交互图片即选即得

//JS file 图片即选即得显示//创建一个FileReader对象var reader = new FileReader();function f_change(file){ var img = document.getElementById('imgSdf'); //读取File对象的数据 reader.onload = function(evt){ //data:im
复制链接

扫一扫

专栏目录