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

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方法,就可以刷新啦:)

时间: 2024-10-14 20:39:33

DevExpress(5): ASPxUploadControl上传照片后用ASPxBinaryImage展示的相关文章

Struts上传照片到服务器

     关于Struts上传照片的功能,可能很多人都已经接触过了.我记得我之前做过一个上传Jar包的功能,那时候是用SpringMVC做的,先做一个类似于上传的功能,将Jar包添加进行之后解读Jar包,是因为要拿到Jar包里面的类名.属性名和中文注释,但是又没办法手动将所有Jar包拷贝到项目下,所以想着用上传的方式来实现.现在是要做上传照片.将用户的照片保存到服务器的文件夹下,如果该文件夹存在,则直接上传,如果不存在就创建该文件夹然后再上传. 前台代码: <pre name="code

Django项目:CRM(客户关系管理系统)--61--51PerfectCRM实现CRM客户报名流程学生合同上传照片

1 # sales_views.py 2 # --------47PerfectCRM实现CRM客户报名流程-------- 3 from django.db import IntegrityError #主动捕捉错误信息 4 from django.shortcuts import render #页面返回 5 from crm import models #数据库 6 from bpm.bpm_auxiliary import bpm_forms #自定制 forms 7 8 # -----

上传照片

//上传照片function action_upload(){ //获取上传文件的文件信息 $photoname = $_FILES['photo']['name']; $type = $_FILES['photo']['type']; $tmp_name = $_FILES['photo']['tmp_name']; $size = $_FILES['photo']['size']; $error = $_FILES['photo']['error']; $maxSize = 20971520

Iphone H5上传照片被旋转

最近做项目发现在Iphone下,我们上传图片都会被翻转,最后查阅资料发现,的确是IOS的问题 不说过程,直接解决方法 iOS下,html方式使用<input type="file">上传图片,图片会被旋转.遇到这个问题js是无法解决的,html也没有相应的解决方案.只能放到后台去处理,将旋转的图片再旋转回来.iOS拍摄的图片提供了EXIF信息,Orientation值为6即顺时针90度,有了这个信息我们只需要逆时针旋转90度即可. 伪代码  //下面是php的伪代码 $ex

解决SharePoint 文档库itemadded eventhandler导致的上传完成后,编辑页面保持报错的问题,错误信息为“该文档已经被编辑过 the file has been modified by...”

在文档库中添加itemadded 后,在上传文件后,会自动打开文档属性的编辑页面,在保存的时候就会报错,说这个文档已经被编辑过了.这是应为默认itemadded实践是异步执行的,会在edit页面打开之前就把属性更新完了,知道在保存的时候,属性不一致. 两种解决方法: 1: 使用item.sysupdate(false). 这个false参数非常重要. 2:将handler的执行变为非异步执行,编辑element.xml文件,如下红色部分: <Receiver><Name>AutoD

Android使用XUtils框架上传照片(一张或多张)和文字,服务器接收照片和文字(无乱码)

Android上传图片,这里我使用了现在比较流行的XUtils框架,该框架可以实现文件上传.文件下载.图片缓存等等,有待研究. 下面是Android段上传的代码: xUtils.jar下载 String uploadHost="http://192.168.1.100:8080/ReceiveImgFromAndroid/ReceiveImgServlet"; //服务器接收地址 RequestParams params=new RequestParams(); params.addB

给图片添加手势,上传照片

.h #import <UIKit/UIKit.h> @interface RootViewController : UIViewController <UIActionSheetDelegate,UIImagePickerControllerDelegate,UINavigationControllerDelegate> { UIImageView *imageView; } .m - (void)viewDidLoad { [super viewDidLoad]; // Do

云展网教程 | 为什么PDF上传转换后尺寸比较小和模糊?

有些用户手上有几张图片想整合成一个PDF文档,直接用word进行编辑整合后保存为PDF再上传到云展网,这个方法是可以,但上传转换后会出现尺寸比较小.字体比较小和失真等问题. 所以最好的方法还是使用专业的PDF制作工具进行制作再上传,同时要保证每个图片不要太大,以免到时造成PDF过大转换失败. 原文地址:https://www.cnblogs.com/prezi/p/10275275.html

上传预览,图片展示大小的控制

在项目开发中需要先上传图片到文件服务器,然后在页面上进行展现,表示上传成功. 起初没有对图片做任何控制,只是增加一个img标签,将src设置为空,当图片上传成功后,通过JavaScript动态的将src设置为服务器上的文件地址.当使用小点图片进行上传时,显示没有任何问题,但是上传大的图片的时候,图片就会破坏div的布局. 为了控制图片的显示,起初就给img标签设置了固定的高度和宽度:height="300" width='200'.这时候图片虽然不会破坏页面的整体布局,但是显示效果会非