生活随笔
收集整理的這篇文章主要介紹了
JS file图片即选即得显示,前端交互图片即选即得
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
<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图片即选即得显示,前端交互图片即选即得的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
