DevExpress控件使用系列--ASPxUploadControl（图片上传及预览）

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页面说明

//开始上传文件

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>

<td>

<dx:ASPxImage runat="server" ID="ImgUpload" ImageUrl="../../Images/ImagePreview.gif"

alt="" Width="100px" Height="100px">

</dx:ASPxImage>

</td>

选择上传图片

</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>

</dx:ASPxUploadControl>

<dx:ASPxButton ID="btnUpload" runat="server" AutoPostBack="False" Text="上传" ClientInstanceName="btnUpload"

Width="100px" ClientEnabled="False" Style="margin: 0 auto;">

</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

From WizNote

DevExpress控件使用系列--ASPxUploadControl（图片上传及预览）相关推荐

FlexPaper控件实现文档的上传和预览
引言之前在一个项目中初识了这个控件,当时自己对这个东西非常高的好奇就尝试着做了一个Demo,最近在项目中遇到了这个需求,所以我向组长推荐了我的这中做法,在之前的系统中是将文档转换成html然后在前 ...
FileUpload控件实现单按钮图片自动上传并带预览显示
FileUpload控件实现单按钮图片自动上传并带预览显示 1.实现原理: FileUpload控件默认不支持服务端的ONCHANGE事件,此时用一种变通的方法借用客户端的onchange事件,调用_ ...
html之file标签 --- 图片上传前预览 -- FileReader
记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...
js实现图片上传本地预览
演示地址:https://xibushijie.github.io/static/uploadImg.html <!DOCTYPE> <html><head>< ...
alert()的功能_前端实现简单的图片上传小图预览功能
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
vue富文本编辑，编辑自动预览，单个图片上传不能预览的问题解决：
vue富文本编辑,编辑自动预览,单个图片上传不能预览的问题解决: 参考文章: (1)vue富文本编辑,编辑自动预览,单个图片上传不能预览的问题解决: (2)https://www.cnblogs.co ...
php+jquery实现图片上传预览_和拖动位置值,PHP教程：thinkphp jquery实现图片上传和预览效果...
<PHP教程:thinkphp jquery实现图片上传和预览效果>要点: 本文介绍了PHP教程:thinkphp jquery实现图片上传和预览效果,希望对您有用.如果有疑问,可以联系我 ...
JS兼容各个浏览器的本地图片上传即时预览效果
JS兼容各个浏览器的本地图片上传即时预览效果很早以前在工作曾经碰到这么一个需求,当时也是纠结了很久,也是google了很久,没有碰到合适的demo,今天特意研究了下这方面的的问题,所以也就做了个简 ...
MUI 图片上传、预览、删除重选等等实现
MUI 图片上传.预览.删除重选等等实现本地项目路径: C:\Users\Administrator\Desktop\超实用的javascript代码\10.5 - MUI 轮播\login\set ...

DevExpress控件使用系列--ASPxUploadControl（图片上传及预览）

DevExpress控件使用系列--ASPxUploadControl（图片上传及预览）相关推荐

最新文章

热门文章