这里有新鲜出炉的精品教程, 程序狗速度看过来!
ASP.NET
ASP.NET 是. NET FrameWork 的一部分, 是一项微软公司的技术, 是一种使嵌入网页中的脚本可由因特网服务器执行的服务器端脚本技术, 它可以在通过 HTTP 请求文档时再在 web 服务器上动态创建它们 指 Active Server Pages(动态服务器页面) , 运行于 IIS(Internet Information Server 服务, 是 Windows 开发的 Web 服务器) 之中的程序
这篇文章主要介绍了基于 ASP.NET+easyUI 框架实现图片上传功能的相关资料, 重点在于如何判断格式, 实现即时浏览, 需要的朋友可以参考下
<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(/^(.*)(\.)(.{1,8})$/)[3]; // 这个文件类型正则很有用
- //// 布尔型变量
- var isExists = false;
- // 循环判断图片的格式是否正确
- for (var i in array) {
- if (fileContentType.toLowerCase() == array[i].toLowerCase()) {
- // 图片格式正确之后, 根据浏览器的不同设置图片的大小
- if (obj.files && obj.files[0]) {
- // 火狐下, 直接设 img 属性
- imgObjPreview.style.display = 'block';
- imgObjPreview.style.width = '400px';
- imgObjPreview.style.height = '400px';
- // 火狐 7 以上版本不能用上面的 getAsDataURL() 方式获取, 需要一下方式
- imgObjPreview.src = window.URL.createObjectURL(obj.files[0]);
- }
- 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 = 400;
- maxheight = 300;
- // 显示
- obj.style.display = "";
- imgbig.src = imgid.src;
- //1 宽和高都超过了, 看谁超过的多, 谁超的多就将谁设置为最大值, 其余策略按照 23
- //2 如果宽超过了并且高没有超, 设置宽为最大值
- //3 如果宽没超过并且高超过了, 设置高为最大值
- if (img.width> maxwidth && img.height> maxheight) {
- pare = (img.width - maxwidth) - (img.height - maxheight);
- if (pare>= 0)
- 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>
界面效果图:
来源: http://www.phperz.com/article/18/0314/352656.html