基于ASP.NET+easyUI框架实现图片上传功能(判断格式+即时浏览 )

基于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、宽和高都超过了,看谁超过的多,谁超的多就将谁设置为最大值,其余策略按照2、3
      //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>

界面效果图:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

时间: 2016-06-26

asp.net MVC实现无组件上传图片实例介绍

例子: 如我想上传一个图片到服务器端:asp页面 复制代码 代码如下: <form id="form1" runat="server" action="/bookIndex/fileUpLoad/(你准备处理的 ActionResult)" method="post" enctype="multipart/form-data"> <input type="file" i

ASP.NET FileUpload 上传图片实例

复制代码 代码如下: <table style="width: 100%"> <tr> <td> <asp:ValidationSummary ID="ValidationSummary1" runat="server" /> <br /> <asp:FileUpload ID="FileUpload1" runat="server" /&g

ASP.Net 上传图片并生成高清晰缩略图

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DT

ASP.NET(C#)实现一次性动态上传多张图片的代码(多个文件)

在做asp.net的Web开发的时候,我们经常会遇到一次性上传多个文件的需求.通常我们的解决方法是固定放多个上传文件框,这样的解决办法显然是不合理的,因为一次上传多个,就意味着数量不确定.因此我们就要让这些文件上传框动态添加,下面我以我做的一个图库管理中的上传图片的功能为例 先看效果: 打开的初始界面: 默认是上传一个图片,但当我们点"增加图片"按钮时可以实现选择多个图片及其描述同时上传,本功能限制一次最多只能上传8张,且每张图片大小不超过1M,这个大家可根据实际情况更改! 如图: 下

asp.net实现上传图片时判断图片的模式GRB或CMYK的方法

本文实例讲述了asp.net实现上传图片时判断图片的模式GRB或CMYK的方法.分享给大家供大家参考,具体如下: Bitmap bmp = new Bitmap(allow_fileStream); //文件路径 allowUpload = stringHelper.IsCMYK(bmp) == "true" ? false : true; //返回true字符串则图片不是RGB模式的 public string IsCMYK(System.Drawing.Image img) { s

asp.net上传图片保存到数据库的代码

数据库:保存图片的数据格式 图象二进制数据储存字段前台: 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="UploadWork.aspx.cs" Inherits="meishuguan.UploadWork" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tr

asp.net UpdatePanel实现无刷新上传图片

1)前台 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.o

Asp.net图片上传实现预览效果的简单代码

在页面上放入一个上传控件和一个图片控件. 复制代码 代码如下: <asp:FileUpload ID="FileUpload1" runat="server" onpropertychange="show(this.value)"/>        <asp:Image ID="Image1" runat="server"  /> 在上传控件中写onpropertychange=&q

ASP.net WebAPI 上传图片实例

复制代码 代码如下: [HttpPost] public Task<Hashtable> ImgUpload() {     // 检查是否是 multipart/form-data     if (!Request.Content.IsMimeMultipartContent("form-data"))         throw new HttpResponseException(HttpStatusCode.UnsupportedMediaType);     //文

asp.net图片上传实例

第一.图片上传,代码如下:xxx.aspx 复制代码 代码如下: <td class="style1">                 <asp:FileUpload ID="FileUpload1" runat="server"  />                <asp:Button ID="Button1" runat="server" Text="上传一

asp.net(c#)判断远程图片是否存在

复制代码 代码如下: private int GetUrlError(string curl) { int num = 200; if(this.method==1) { HttpWebRequest request=(HttpWebRequest) WebRequest.Create(new Uri(curl)); ServicePointManager.Expect100Continue=false; try { ((HttpWebResponse)request.GetResponse()

asp.net图片上传生成缩略图的注意事项

bitmap.Save(imgPath,ImageFormat.Jpeg);   //这是保存缩略图的一段代码,其中的ImageFormat.Jpeg一定不能省略,即使你保存的文件本来就是jpg格式的,也不能去掉.因为如果去掉的话,生成的缩略图比原始图片还要大! //另外,imgPath必须首先创建,否则会产生GDI+的一般性错误. path=System.Web.HttpContext.Current.Server.MapPath(path); 使用if(!System.IO.Director

ASp.net下fckeditor配置图片上传最简单的方法

1. 原先的配置 把 fckeditor/filemanager/connectors 目录删除: 有同学可能会问了,都删除了怎么上传文件? 呵呵... 2. 不要引用 FredCK.FCKeditorV2.dll; 因为我都是采用js写的,不采用控件的方式: 其实网上有很多人在尝试往 fckeditor/filemanager/connectors目录下注入, 确实也有人不小心直接把FCK编辑器没有任何配置的情况下传到网上导致中招了: 3. 现在讲正题吧,一般来说我们用FCK的时候并不多,在一

基于ASP.NET+EasyUI框架实现图片上传提交表单功能(js提交图片)

我的风格,先给大家展示下效果图,具体效果图如下所示,如果大家感觉还不错很满意请参考实现代码. HTML的代码: <form id="ff" runat="server" method="post"> <div id="content" style="margin-left:50px;"> <table style="width:300px;" id=&quo

PHP实现微信图片上传到服务器的方法示例

本文实例讲述了PHP实现微信图片上传到服务器的方法.分享给大家供大家参考,具体如下: $pic_img=trim( $postObj->PicUrl); if($type=="image"){ $pic_url=save_file_to_sever($pic_img,$fromUsername); } GetRootPath(){ $sRealPath = realpath('./'); $sSelfPath = $_SERVER['PHP_SELF']; $sSelfPath

layui 阻止图片上传的实例(before方法)

今天项目上传图片需要校验大小,而且各个地方图片大小的限制不一样,如果在后台控制会比较麻烦,所以就放在 js 里校验,这里用的layui(1.0.9) 的 upload.js 模块.这个版本的layui本来是不支持阻止图片上传的,所以改动了源码. //改动前的 s.before && s.before(e),l.parent().submit(); //改动后的 if(s.before==undefined || s.before(e)==undefined || (s.before &am

php图片上传类 附调用方法

本文实例为大家分享php图片上传类,供大家参考,具体内容如下 调用方法: <?php header("Content-Type:text/html; charset=utf-8"); //类的实例化: include("uppoo.php");//类的文件名是upoop.php $up=newupphoto; $submit=$_POST['submit']; if($submit=="上传"){ $up->get_ph_tmpnam

iOS将相册中图片上传至服务器的方法

本文为大家分享了iOS图片上传至服务器的具体代码,供大家参考,具体内容如下 在使用app时,从相册中选取图片作为头像是很常用的操作,首先打开相册选择图片,然后将图片保存至本应用的document,最后将document中图片的路径保存至NSUserDefaults和服务器. 从相册中选取图片或拍照 //从相册中选取图片或拍照 - (void)btnActionForEditPortrait:(id) sender { UIImagePickerController *picker = [[UII

通过Fckeditor把图片上传到独立图片服务器的方法

我大概思考了下有如下几种方法可以解决: 1.在图片服务器上开通FTP,人为添加图片地址即可,但不方便,特别是在可视编辑器中看图还的多一部操作. 2.在图片服务器上开通FTP,并提高IIS执行dosShell访问ftp,但是不安全. 3.在图片服务器上开通IIS,WEB后台直接访问(还是存在在编辑器中不方便查看的问题,但可以用js控制上传后自动追加到HTML编辑窗口中) 4.利用现有在线编辑器的上传程序来实现. 第三,四种方法比较靠谱,但还需要解决跨域问题,第三种还要单独写程序,改动比较大,用第四

asp.net下使用DIME协议上传文件

在某些Web Service的应用场景下,例如公文的传送,在Web Service返回结果的同时将word文档及其它附件返回,这时候可以使用DIME协议来进行文件的传输.使用它来传输不需要经过SOAP消息的序列化/反序列化,有很高的效率.当然这里要用到Web Services Enhancements (WSE) ,目前的最新版本为3.0.本文中所使用的版本为2.0sp2,有趣的是WSE的各个版本中的命令空间都有很大的变化.这一点的确有点让人苦恼!在安装WSE时推荐将Visual Studio 

CKEditor与dotnetcore实现图片上传功能

本文实例为大家分享了CKEditor与dotnetcore实现图片上传的具体代码,供大家参考,具体内容如下 CKEditor的使用 1.引入js库 <script src="https://cdn.ckeditor.com/4.6.1/standard-all/ckeditor.js"></script> 2.定义一个textarea标签 <textarea id="editor"> </textarea> 3.用Ck

TinyMCE 新增本地图片上传功能

这样TinyMCE 就可以正常显示图片了.其实该功能属于普通HTML富文本控件基本功能了.现有需求将TinyMCE 扩展成可直接上传本地图片而后在文本区域显示图片. 实现思路: 使用Ajax 进行图片上传,此上传方式可以更友好的实现TinyMCE 的图片上传扩展, 具体方法可以参考我的上一篇 Jquery ajaxsubmit 上传图片.将Ajax上传图片集成到 TinyMCE 中, 主要是修改TinyMCE 目录下的 tinymce\jscripts\tiny_mce\plugins 的 ad