DevExpress(5): ASPxUploadControl上传照片后用ASPxBinaryImage展示

浏览数：347 / 时间：2015年06月09日

DevExpress版本14.1

效果图：

技术分享

用户单击文件上传按钮，弹出文件选择窗口；选择文件后，自动上传到服务器保存至数据库（大头照文件一般不大，放数据库便于管理 :) 也可以保存至服务器上的文件夹）；然后界面使用BinaryImage控件展示照片。

大体思路：

（1）用户选择文件后如何自动上传？给UploadControl添加TextChanged客户端事件，当文本改变的时候，调用uploader的客户端UploadFile()方法

（2）服务端添加FileUploadComplete事件，可以得到大头照，然后保存至数据库

（3）BinaryImage如何刷新？因为文件上传其实是Callback提交方式，因此在FileUploadComplete事件中无法刷新BinaryImage，并且BinaryImage也没有客户端PerformCallback方法。办法是给BinaryImage套一个ASPxCallbackPanel，当文件上传结束后，调用CallbackPanel的客户端PerformCallback方法，然后在服务端刷新BinaryImage

（4）作为补充，如果要在服务端和客户端传递一些参数那？

一是使用服务端FileUploadComplete的e.CallbackData，可以拼接字符串，然后使用的时候再拆开，不太方便；

二是使用Session，在服务端不同的事件之间传递参数，问题是Session是全局的，能不用尽量不用；

三是使用ASPxHiddenField隐藏字段，虽然叫Field但是可以存放多个属性，使用还是比较方便的:)

设计界面如下：

技术分享

关键代码：

UploadControl用到客户端TextChanged和FileUploadComplete事件，服务端FileUploadComplete事件。

执行顺序是：客户端TextChanged->服务端FileUploadComplete->客户端FileUploadComplete

<dx:ASPxUploadControl ID="ASPxUploadControl1" runat="server" Width="99px" ClientInstanceName="UploadControl"
    OnFileUploadComplete="ASPxUploadControl1_FileUploadComplete">
    <ValidationSettings AllowedFileExtensions=".jpeg, .jpg, .gif" MaxFileSize="1048576"
        MaxFileSizeErrorText="文件大小不得超过1MB!">
    </ValidationSettings>
    <ClientSideEvents TextChanged="function(s, e) { UploadControl.UploadFile();}" 
        FileUploadComplete="function(s, e) { if(e.callbackData != undefined) CallbackPanel.PerformCallback(‘‘); else alert(e.callbackData);}" />
    <BrowseButton Text="选择">
    </BrowseButton>
</dx:ASPxUploadControl>