码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2015-02-13 09:38:08      阅读:512      评论:0      收藏:0      [点我收藏+]

标签:

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>

 

还有就是给CallbackPanel添加服务端Callback事件,填充BinaryImage的ContentBytes,就实现刷新啦,这个代码就不贴出来了:)

 

补充:

如果我的照片不是保存到数据库那?那就简单了:

(1)用ASPxImage代替ASPxBinaryImage

(2)在UploadControl的服务端FileUploadComplete事件,通过e.CallbackData返回照片的路径

(3)在UploadControl的客户端FileUploadComplete事件,使用Image的客户端SetImageUrl方法,就可以刷新啦:)

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

标签:

原文地址:http://www.cnblogs.com/wuchaochao/p/4289653.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!