JS file图片即选即得显示,前端交互图片即选即得
2024-03-26 17:22:23
<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>JS file图片即选即得显示,前端交互图片即选即得相关推荐
- vue图片img加载失败显示自定义默认图片(缺省图)
vue图片img加载失败显示自定义默认图片(缺省图) 1.图片加载示例 2.加载失败显示默认图片 3.加载失败默认图片代码处理 <div class="book-img" ...
- android图片点击全屏显示,Android浏览图片，点击放大至全屏效果
近期做一个项目类似于QQ空间,做到照片浏览的功能,对于QQ空间中点击图片放大至全屏,感觉效果非常赞,于是也做了个类似的效果. 例如以下. 我不知道QQ那个是怎么做的.我的思路例如以下: 首先.从图片缩 ...
- android 显示图片和文字,android TextView显示文字和图片
在做web的时候jsp页面可以直接显示一段html代码,如: TextView使用HTML 强调 斜体 " +" 超链接HTML入门学习HTML! 颜色1" +" ...
- word中图片为嵌入式格式时显示不全_图片在word中显示不全怎么处理_word图片显示不全怎么办-win7之家...
我们在编辑word文档时,会需要插入一些图片来做为装饰或者用来标识,也会出现插入的图片显示不全的情况,要是遇到这种情况该怎么办,那么图片在word中显示不全要怎么处理呢,下面小编给大家分享图片在wor ...
- iview 动态控制 table中某一行select勾选框能否选中，以及某一行select勾选框能否显示(隐藏禁用的勾选框)。
如上图,这是一个vue页面中的table,在其columns中加了一个selection后,实现了多选/全选table行的功能: {type: 'selection',width: 60,align: ...
- 关于CheckBox勾选隐藏和显示，以及导出勾选的复选框的excel文档
前台显示页面: 然后点击展开按钮: 勾选展开或者收起里的复选框,或者勾选序号里的复选框,点击翻译后还会记住之前的勾选,点击excel导出,可以导出你任意勾选的复选框的数据,下面是对应的前台jsp,后台 ...
- 为了美观当网页图片不存在时不显示叉叉图片
当在页面显示的时候,万一图片被移动了位置或者丢失的话,将会在页面显示一个带X的图片,很是影响用户的体验.即使使用alt属性给出了"图片XX"的提示信息,也起不了多大作用. 其实,可 ...
- ajax使鼠标触摸时图片放大,当鼠标移动到图片上时跟随鼠标显示放大的图片效果...
原始状态: 鼠标经过: 无标题文档 $(function(){ var offsetX=20-$("#imgtest").offset().left; var offsetY=20 ...
- 【jQuery Demo】图片由下至上逐渐显示
无意中看到如何实现一张图片从下往上慢慢显现出来这个问题,弄了半天还是从上往下的效果,纠结了,最后还是提问人自己搞定了!不过哈哈,又学到一点知识! 1.下面是我自己做的效果(按钮可以点哦) 图片由下至上 ...
最新文章
- LAMP环境搭建与测试
- p2p webrtc服务器搭建系列1： 房间,信令,coturn打洞服务器
- shell `-c`参数 如何使用
- 一道暴力枚举题Win32版本示例
- 用Tableau画延展条形图（Extended Bar Chart）
- 老大爷的手法一看就不一般！
- 对thinkphp的命名空间的理解
- 波士顿动力再发逆天机器人视频：倒立、360°旋转、空中劈叉，真是秀儿
- 论一只爬虫的自我修养（第二天）
- 1006 换个格式输出整数（C语言）
- 【软件项目管理】滨江学院 李振宏 软件项目管理 试卷考点知识点整理
- 中国唯一入选 Forrester 领导者象限，阿里云 Serverless 产品能力全球第一
- 【GIS】GIS矢量空间分析（上）
- java hsqldb_Hsqldb入门
- mysql 后缀 deleted,MySQL · 特性分析 · (deleted) 临时空间
- 大数据学习之hadoop——09一次完整的edits、fsimage、edits_inprogress、chkpoint、NameNode运行原理分析
- 【codeforces 721A】One-dimensional Japanese Crossword
- 开发微信小程序都需要哪些资质？
- hangfire-简单开始
- Linux的安装(手把手一步一步教学)