1、控件功能
     列表控件展示数据、弹框控件执行编辑操作、Tab控件实现多标签编辑操官方说明

2、官方示例

      2.1 ASPxImage
                http://documentation.devexpress.com/#AspNet/CustomDocument14828
      2.2 ASPxUploadControl
               http://documentation.devexpress.com/#AspNet/DevExpressWebASPxUploadControl
 
3、使用说明
      3.1 aspx页面说明
      <script type="text/javascript">
 
        //开始上传文件
        function Uploader_OnUploadStart() {
            btnUpload.SetEnabled(false);
        }
 
        //文件上传完成,并显示图片预览
        function Uploader_OnFileUploadComplete(args) {
            if (args.isValid) {
                var date = new Date();
                imgSrc = "../../Images/UploadImages/" + args.callbackData;  //callbackData为后台传回的图片名称
            }
            getPreviewImageElement().src = imgSrc;  //路径前缀+图片名称,预览图片
        }
 
        //所有文件上传完成
        function Uploader_OnFilesUploadComplete(args) {
            UpdateUploadButton();
        }
 
        //更新上传按钮状态
        function UpdateUploadButton() {
            btnUpload.SetEnabled(uploader.GetText(0) != "");
        }
 
        //获取预览控件编号(上传框textchanged事件)
        function getPreviewImageElement() {
            return document.getElementById("main_Popup_ImgUpload");
        }
    </script>
 
 
 
 
  <tr>
                        <td style="white-space: nowrap">
                            图片预览
                        </td>
                        <td>
                            <dx:ASPxImage runat="server" ID="ImgUpload" ImageUrl="../../Images/ImagePreview.gif"
                                alt="" Width="100px" Height="100px">
                            </dx:ASPxImage>
                        </td>
                        <td style="white-space: nowrap">
                            选择上传图片
                        </td>
                        <td>
                            <dx:ASPxUploadControl ID="uplImage" runat="server" ClientInstanceName="uploader"
                                ShowProgressPanel="True" NullText="点击浏览图片文件..." Size="35" OnFileUploadComplete="uplImage_FileUploadComplete"
                                UploadButton-Text="浏览">
                                <ClientSideEvents FileUploadStart="function(s, e) { Uploader_OnUploadStart(); }"
                                    FileUploadComplete="function(s, e) { Uploader_OnFileUploadComplete(e); }" FilesUploadComplete="function(s, e) { Uploader_OnFilesUploadComplete(e); }"
                                    TextChanged="function(s, e) { UpdateUploadButton(); }"></ClientSideEvents>
                                <ValidationSettings MaxFileSize="4194304" AllowedFileExtensions=".jpg,.jpeg,.jpe,.gif,.png">
                                </ValidationSettings>
                            </dx:ASPxUploadControl>
                            <dx:ASPxButton ID="btnUpload" runat="server" AutoPostBack="False" Text="上传" ClientInstanceName="btnUpload"
                                Width="100px" ClientEnabled="False" Style="margin: 0 auto;">
                                <ClientSideEvents Click="function(s, e) { uploader.Upload(); }" />
                            </dx:ASPxButton>
                        </td>
                    </tr>
      3.2 cs代码说明

 #region 图片上传及预览
    const string UploadDirectory = "~/Images/UploadImages/";  //图片上传文件夹路径
 
    protected void uplImage_FileUploadComplete(object sender, FileUploadCompleteEventArgs e)
    {
        e.CallbackData = SavePostedFile(e.UploadedFile);
    }
 
    string SavePostedFile(UploadedFile uploadedFile)
    {
        if (!uploadedFile.IsValid)
        {
            return string.Empty;
        }
 
        string fileName = Guid.NewGuid() + Path.GetExtension(uploadedFile.FileName);  //文件名
        string filePath = Path.Combine(Server.MapPath(UploadDirectory), fileName);    //文件完整物理路径
        uploadedFile.SaveAs(filePath);
 
        Session["ImgFileName"] = fileName;  //临时存放图片名、用于图片预览
 
        return fileName;  //返回文件名用于预览
    }
    #endregion

DevExpress控件使用系列--ASPxUploadControl(图片上传及预览)的更多相关文章

  1. FileUpload控件实现单按钮图片自动上传并带预览显示

    FileUpload控件实现单按钮图片自动上传并带预览显示 1.实现原理:   FileUpload控件默认不支持服务端的ONCHANGE事件,此时用一种变通的方法借用客户端的onchange事件,调 ...

  2. html之file标签 --- 图片上传前预览 -- FileReader

    记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...

  3. 图片上传本地预览。兼容IE7+

    基于JQUERY扩展,图片上传预览插件 目前兼容浏览器(IE 谷歌 火狐) 不支持safari 预览地址:http://www.jinbanmen.com/test/1.html js代码:/**名称 ...

  4. uploadPreview 兼容多浏览器图片上传及预览插件使用

    uploadPreview兼容多浏览器图片上传及预览插件 http://www.jq22.com/jquery-info2757 Html 代码 <div class="form-gr ...

  5. file标签 - 图片上传前预览 - FileReader & 网络图片转base64和文件流

    记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...

  6. JQuery插件:图片上传本地预览插件,改进案例一则。

    /* *名称:图片上传本地预览插件 v1.1 *作者:周祥 *时间:2013年11月26日 *介绍:基于JQUERY扩展,图片上传预览插件 目前兼容浏览器(IE 谷歌 火狐) 不支持safari *插 ...

  7. 【转】html之file标签 --- 图片上传前预览 -- FileReader

    记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...

  8. ASP.NET MVC图片上传前预览

    回老家过春节,大半个月,在家的日子里,吃好睡好,人也长了3.5Kg.没有电脑,没有网络,无需写代码,工作上相关的完全放下......开心与父母妻儿过个年,那样的生活令Insus.NET现在还在留恋.. ...

  9. js实现图片上传及预览---------------------->>兼容ie6-8 火狐以及谷歌

    <head runat="server"> <title>图片上传及预览(兼容ie6/7/8 firefox/chrome)</title> & ...

随机推荐

  1. 路由器之VPN应用与配置指南

    应用背景 近日,公司需要在外人员通过直接访问连接到公司内网,实现办公等一系列操作,这个时候就需要通过配置路由器VPN实现该需求了. 无线企业路由器可以帮助中小型企业搭建高性价比.稳定的企业办公网络,灵 ...

  2. 20160126深入浅出obc知识点整理

    1.错误域Error Domain NSMachErrorDomain:系统内核错误 NSPOSIXErrorDomain:系统错误 NSOSStatusErrorDomian:MacOS9之前的错误 ...

  3. Objective-C 【Category-非正式协议-延展】

    -------------------------------------------  类别(Category)的声明和实现 实质:类别又叫类目,它其实是对类的一个拓展!但是他不同于继承后的拓展! ...

  4. javascript之面向对象程序设计(对象和继承)

    总结的文章略长,慎点. 知识点预热 引用类型:引用类型的值(对象)是引用类型的一个实例.在ECMAScript中,引用类型是一种数据结构,用于将数据和功能组织在一起.在其他面向对象语言中被称为类,虽然 ...

  5. 一些常用css技巧的为什么(二)我所理解的line-height

    要用到的基本术语和概念: 替换元素:用作为其他内容占位符的一个元素,或说替换元素内容的部分并非由文档内容直接表示.比如img元素它由文档本身之外的一个图像来替换,比如input元素要由一个单选按钮,复 ...

  6. JavaScript知识思维导图

    知识点:(图片为网络转载,谢谢分享.) JavaScript 变量 JavaScript 数据类型 JavaScript 字符串函数 Javascript 运算符 JavaScript 流程控制 Ja ...

  7. [sql server] 如何阻止SELECT * 语句

    我们每个人都知道是个不好的做法,但有时我们还是要这样做:我们执行SELECT * 语句.这个方法有很多弊端: 你从你的表里返回每个列,甚至后期加的列.想下如果你的查询里将来加上了VARCHAR(MAX ...

  8. EDK中如何使用ISE中生成的IP

    EDK中如何使用ISE中生成的IP: 网上上有说这个的文章,但是很复杂,也就是添加bdd文件,其实这些都不需要自己操作的,我们可以在EDK中import 中添加ngc文件,ngc文件就是core ge ...

  9. IE8浏览器跨域接口访问异常的解决办法

    IE8版本以下浏览器绝对是一个神奇的存在,忙碌好久,万事具备,居然在ajax调用接口的时候直接爆炸 陈述一下问题 首先是有这样一个接口,请求类型POST,入参JSON,出参JSON,jQuery aj ...

  10. PHP运行方式对比

    文章内容来自以下站点http://www.cnblogs.com/xia520pi/p/3914964.html 关于PHP目前比较常见的五大运行模式: 1.CGI(通用网关接口 / Common G ...