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

时间：2021-02-25 17:06:34
 
 
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页面说明
      <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

相关文章