<div>
选择图片:<input id="idFile" style="width:224px" runat="server" name="pic" onchange="javascript:setImagePreview(this,localImag,preview);" type="file" />
</div>
预  览:
<div id="localImag">
<%--预览,默认图片--%>
<img id="preview" alt="" onclick="over(preview,divImage,imgbig);" src="img/5691.jpg" style="width: 400px; height: 400px;"/>
</div>
<script>
//检查图片的格式是否正确,同时实现预览
function setImagePreview(obj, localImagId, imgObjPreview) {
var array = new Array('gif', 'jpeg', 'png', 'jpg', 'bmp'); //可以上传的文件类型
if (obj.value == '') {
$.messager.alert("让选择要上传的图片!");
return false;
}
else {
var fileContentType = obj.value.match(/^(.*)(\.)(.{,})$/)[]; //这个文件类型正则很有用
////布尔型变量
var isExists = false;
//循环判断图片的格式是否正确
for (var i in array) {
if (fileContentType.toLowerCase() == array[i].toLowerCase()) {
//图片格式正确之后,根据浏览器的不同设置图片的大小
if (obj.files && obj.files[]) {
//火狐下,直接设img属性
imgObjPreview.style.display = 'block';
imgObjPreview.style.width = '400px';
imgObjPreview.style.height = '400px';
//火狐7以上版本不能用上面的getAsDataURL()方式获取,需要一下方式
imgObjPreview.src = window.URL.createObjectURL(obj.files[]);
}
else {
//IE下,使用滤镜
obj.select();
var imgSrc = document.selection.createRange().text;
//必须设置初始大小
localImagId.style.width = "400px";
localImagId.style.height = "400px";
//图片异常的捕捉,防止用户修改后缀来伪造图片
try {
localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
}
catch (e) {
$.messager.alert("您上传的图片格式不正确,请重新选择!");
return false;
}
imgObjPreview.style.display = 'none';
document.selection.empty();
}
isExists = true;
return true;
}
}
if (isExists == false) {
$.messager.alert("上传图片类型不正确!");
return false;
}
return false;
}
} //显示图片
function over(imgid, obj, imgbig) {
//大图显示的最大尺寸 4比3的大小 400 300
maxwidth = ;
maxheight = ; //显示
obj.style.display = "";
imgbig.src = imgid.src; //1、宽和高都超过了,看谁超过的多,谁超的多就将谁设置为最大值,其余策略按照2、3
//2、如果宽超过了并且高没有超,设置宽为最大值
//3、如果宽没超过并且高超过了,设置高为最大值 if (img.width > maxwidth && img.height > maxheight) {
pare = (img.width - maxwidth) - (img.height - maxheight);
if (pare >= )
img.width = maxwidth;
else
img.height = maxheight;
}
else if (img.width > maxwidth && img.height <= maxheight) {
img.width = maxwidth;
}
else if (img.width <= maxwidth && img.height > maxheight) {
img.height = maxheight;
}
}
</script>

界面效果图:

基于ASP.Net +easyUI框架上传图片,判断格式+实现即时浏览的更多相关文章

  1. 基于ASP.Net +easyUI框架上传图片,实现图片上传,提交表单

    <body> <link href="../../Easyui/themes/easyui.css" rel="stylesheet" typ ...

  2. 基于asp.net + easyui框架,一步步学习easyui-datagrid——实现分页和搜索(二)

    http://blog.csdn.net/jiuqiyuliang/article/details/19967031 目录: 基于asp.net + easyui框架,一步步学习easyui-data ...

  3. 使用ajax上传图片,支持图片即时浏览,支持js图片压缩后上传给服务器

    使用ajax上传图片,支持图片即时浏览,支持js图片压缩后上传给服务器 ajax上传主要使用了 var reader = new FileReader() 此方法 js图片压缩主要是利用canvas进 ...

  4. Unity容器的简单AOP与DI的应用Demo(基于asp.net mvc框架)

    转发请注明出处:https://home.cnblogs.com/u/zhiyong-ITNote/ 整个Demo是基于Controller-Service-Repository架构设计的,每一层之间 ...

  5. 使用easyui框架 设置时间格式

    之前做的一个商城项目,后台系统页面使用Easyui做的,记录一个当时卡住的地方: 首先通过<table>标记创建数据网格(datagrid) <table class="e ...

  6. 毕业设计 ASP.Net+EasyUI开发 X X露天矿调度管理信息系统(一)

    开篇介绍关于EasyUI技术,界面部分的一些使用知识,包括控件的赋值.取值.清空,以及相关的使用. 我们知道,一般Web界面包括的界面控件有:单行文本框.多行文本框.密码文本框.下拉列表Combobo ...

  7. 基于easyui框架中input 类型的checkbox拼接成字符串存入数据库和读取选中---善良公社项目

    项目中我做修改用户个人资料的时候,有一个需求是帮助人员的帮助类型如图下所示: 当初想如果是asp.net控件的话应该很简单实现,如果不是基于easyUI框架那就太简单了,现在是受框架的限制与是前端ht ...

  8. 一步一步搭框架(asp.netmvc+easyui+sqlserver)-02

    一步一步搭框架(asp.netmvc+easyui+sqlserver)-02 我们期望简洁带前台代码,如下: <table id="dataGrid" class=&quo ...

  9. 一步一步搭框架(asp.netmvc+easyui+sqlserver)-03

    一步一步搭框架(asp.netmvc+easyui+sqlserver)-03 我们期望简洁的后台代码,如下: using System; using System.Collections.Gener ...

随机推荐

  1. mac下xampp简单虚拟主机配置

    多域名,虚拟主机的配置 开启虚拟主机配置选项: 打开httpd.conf文件,找到httpd-vhosts.conf那一行,解除该行注释: 打开httpd-vhosts.conf文件 修改如下 < ...

  2. thinkphp 3+ 观后详解 (1)

    最近面试了一些公司,发现自己的对于架构能力的不足,于是决定开始从最基本的代码做起.先看看大牛们怎么架构整个框架的.鉴于国外的框架比较难懂,于是就选择了国内比较流行的thinkphp来进行研究. 下面写 ...

  3. c# 轻量级ORM框架 之 WhereHelper (二)

    上篇文章发布了一些设计orm框架基层的和实现,有朋友提出WhereHelper是亮点,能被认可我表示高兴. 我就把WhereHelper设计思想和代码公开下. WhereHelper 的概念就是再拼接 ...

  4. ProcessBuilder和Runtime远程执行

    http://desert3.iteye.com/blog/1596020 ProcessBuilder.start() 和 Runtime.exec() 方法都被用来创建一个操作系统进程(执行命令行 ...

  5. Java浮点值拒绝服务漏洞危害分析

    By 空虚浪子心 http://www.inbreak.net/ JAVA出了漏洞,CVE-2010-4476,会导致拒绝服务攻击.大家能从公告上,看到这样一段代码,挺长的.意思是只有开发人员写出这样 ...

  6. 学习理论之正则化(Regularization)与模型选择

    一.引言 对于一个学习问题,可以假设很多不同的模型,我们要做的是根据某一标准选出最好的模型.例如,在多项式回归中,对于我们的假设模型,我们最要紧的是决定 k 到底取多少合适,能不能有一种方法可以自动选 ...

  7. CSS的魔法和魅力

    其实我最开始学会的语言是HTML,我记得那还是大一的事情.当时我对床的兄弟DR放了一本HTML的书在床上,我因为没事就拿来看看.那本书大概只有50页左右,可是可以说如果没有这本书,今天Maybe我不会 ...

  8. android4.4.2 短信广播变更

    近期三星陆续放出android4.4.2ROM更新包,android4.4.2对短信虽说是放开了权限,但其实是加强了限制,一台手机智能通过一个设置为默认应用的短信应用软件才能发送短信,否则就无法对短信 ...

  9. 关于C#资源文件操作的总结

    // 在这里,我来总结一下关于资源文件的相关操作. //1. 比较常见的有获取资源文件对应的文件流,然后转换到相对应的文件 // 比较典型的做法是通过代码程序集加载指定资源 // 如下通过Assemb ...

  10. 分享 Java微信开发SDK

    分享 Java微信开发SDK •发布于 4周前  •作者 朋也  •432 次浏览  •最后一次编辑是 2周前  •来自 分享 给大家分享两个java开发微信公众号的sdk jfinal-weixin ...