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

      <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

From WizNote