js进行图片相关操作

本文主要是利用file获取本地图片并在界面上显示以及放大操作。

一、file获取图片并显示：

<div><input name="callRecordImg" type="file" class="file_1" onChange="onUploadFileChange(this)"/><img id="callRecordImg"/></div>

其中input标签获取图片，img标签进行图片显示。下面是onUploadFileChange()方法进行图片格式验证以及显示操作：

//图片上传相关验证function onUploadFileChange(sender) {var v = sender.value;if(v==undefined || v==""){return false;}if(!/\.(jpg|jpeg|png)$/.test(v)){return false;}if (typeof FileReader == 'undefined') {        alert("不支持图片预览");        }var reader = new FileReader();var file = sender.files[0];reader.onload = function (e) {        var img = document.getElementById("callRecordImg");        img.src = e.target.result;        img.style.width = "200px";        img.style.height = "200px";     }     reader.readAsDataURL(file);}

至此完成图片上传及预览功能，下面介绍图片的放大操作：现在头部引入相关样式和js,

<script type="text/javascript" src="${ctx}/js/tinybox.js"></script>    <link rel="Stylesheet" href="${ctx}/css/window.css" />

相关文件可下载路径：http://download.csdn.net/download/qq_30401659/10103289。

具体代码实现：

<img style="width:200px;height:200px;cursor:pointer;" src="图片路径" onclick="showWindow(this);"/>

js代码：

function showWindow(img){var content = "<img width='640px' height='450px' src='"+$(img)[0].src+"'/>";TINY.box.show(content,0,0,0,1);}

至此完成全部操作。