1、控件功能
列表控件展示數據、彈框控件執行編輯操作、Tab控件實現多標簽編輯操 官方說明
2、官方示例
列表控件展示數據、彈框控件執行編輯操作、Tab控件實現多標簽編輯操 官方說明
2、官方示例
3、使用說明
3.1 aspx頁面說明
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