Question

我想知道是否可以自定义.net 4.0 Ajax Html编辑器图像上传按钮附带的图像上载屏幕的设计。如果有可能有人有任何链接或示例吗？

Answer 1

所以... AJAX控件工具包的“插入图像”功能创建了一个可怕的div和spans怪物，具有各种内联样式和非常长的ID /名称属性（我将放在最后这个答案，供参考）。

但是，您可以定位一些类来设置图像上载弹出窗口的特定组件的样式。由于这个子组件似乎没有任何文档，我将在下面记录这些CSS类：

.popupDiv - 单击“插入图像”按钮时显示的图像上载弹出窗口最外层容器的选择器
.ajax__fileupload - 文件上传区域的外部容器div的选择器
.ajax__fileupload_dropzone - “拖放”文件上传区域的选择器。这只会出现在支持此功能的浏览器中。
.ajax__fileupload_selectFileContainer - 传统文件上传区域周围容器的选择器（单击用于Windows文件选择对话框）。
.ajax__fileupload_selectFileButton - “选择文件”范围内的选择器
.ajax__fileupload_topFileStatus - “请选择要上传的文件区域”（“选择文件”右侧）周围的容器选择器
.ajax__fileupload_queueContainer - 包含您目前所选文件的容器的选择器
- .ajax__fileupload_fileItemInfo - 您将为上传的每个文件获取其中一个
.ajax__fileupload_footer - 弹出窗口底部的选择器（文件列表下方）。
.ajax__fileupload_ProgressBarHolder弹出窗口的进度条部分的容器
.ajax__fileupload_progressBar - 使用此功能定位进度条
.ajax__fileupload_uploadbutton - “上传”按钮的选择器

这是弹出窗口的基本轮廓（我删除了除类属性之外的所有属性）：

<div class="popupDiv"> 
    <div>
        <div class="ajax__fileupload">
            <div class="ajax__fileupload_dropzone">
                Drop files here
            </div>
            <span class="ajax__fileupload_selectFileContainer">
                <span class="ajax__fileupload_selectFileButton">
                    Select File
                </span>
                <input type="file">
                <input type="file">
            </span>
            <div class="ajax__fileupload_topFileStatus">
                <div>
                    Please select file(s) to upload.
                </div>
            </div>
            <div class="ajax__fileupload_queueContainer">
            </div>
            <div class="ajax__fileupload_footer">
                <div class="ajax__fileupload_ProgressBarHolder">
                    <div>
                        <div class="ajax__fileupload_progressBar">
                        </div>
                    </div>
                </div>
                <div class="ajax__fileupload_uploadbutton">
                    Upload
                </div>
            </div>
        </div>
    </div>
    <div>
        Cancel
    </div>
</div>

这是弹出的（原始）生成的HTML，带有丑陋的内联样式/ ids /名称。请注意，这是Chrome的输出。如果您使用旧版本的IE，则会有一些差异（其他浏览器也可能存在差异，但总体结构应该相同）。

<div id="ctl00_SampleContent_htmlEditorExtender2_popupDiv" 
    style="opacity: 1; display: block; visibility: visible; position: fixed; z-index: 1000;" 
    class="popupDiv" displaychanged="true" visiblechanged="true">
    <div id="ctl00_SampleContent_htmlEditorExtender2_ajaxFileUpload">
        <div id="ctl00_SampleContent_htmlEditorExtender2_ajaxFileUpload_ctl00" class="ajax__fileupload">
            <div class="ajax__fileupload_dropzone" id="ctl00_SampleContent_htmlEditorExtender2_ajaxFileUpload_Html5DropZone" 
                style="width: 100%; height: 60px; visibility: visible;">
                Drop files here
            </div>
            <span id="ctl00_SampleContent_htmlEditorExtender2_ajaxFileUpload_SelectFileContainer" 
                class="ajax__fileupload_selectFileContainer" style="float:left;">
                <span id="ctl00_SampleContent_htmlEditorExtender2_ajaxFileUpload_SelectFileButton" 
                    class="ajax__fileupload_selectFileButton">
                    Select File
                </span>
                <input name="ctl00$SampleContent$htmlEditorExtender2_ajaxFileUpload$ctl04" 
                    type="file" id="ctl00_SampleContent_htmlEditorExtender2_ajaxFileUpload_Html5InputFile" 
                    multiple="multiple" style="opacity: 0; visibility: visible;">
                <input name="ctl00$SampleContent$htmlEditorExtender2_ajaxFileUpload$ctl05" 
                    type="file" id="ctl00_SampleContent_htmlEditorExtender2_ajaxFileUpload_InputFileElement" 
                    style="opacity:0;-moz-opacity:0.0;filter:alpha(opacity=0);display:none;visibility:hidden;">
            </span>
            <div class="ajax__fileupload_topFileStatus" style="position:relative;">
                <div id="ctl00_SampleContent_htmlEditorExtender2_ajaxFileUpload_FileStatusContainer" 
                    style="right: 0px; top: 2px; height: 20px; line-height: 20px; visibility: visible; position: absolute;">
                    Please select file(s) to upload.
                </div>
            </div>
            <div id="ctl00_SampleContent_htmlEditorExtender2_ajaxFileUpload_QueueContainer" 
                class="ajax__fileupload_queueContainer" style="display:none;visibility:hidden;margin-top:28px;">
            </div>
            <div class="ajax__fileupload_footer" id="ctl00_SampleContent_htmlEditorExtender2_ajaxFileUpload_Footer" 
                align="right">
                <div class="ajax__fileupload_ProgressBarHolder">
                    <div id="ctl00_SampleContent_htmlEditorExtender2_ajaxFileUpload_ProgressBarContainer" align="left" 
                        style="float:left;width:100%;display:none;visibility:hidden;">
                        <div id="ctl00_SampleContent_htmlEditorExtender2_ajaxFileUpload_ProgressBar" class="ajax__fileupload_progressBar" 
                        style="width: 100%; display: none; visibility: hidden; overflow:visible;white-space:nowrap; height:20px;">
                        </div>
                    </div>
                </div>
                <div id="ctl00_SampleContent_htmlEditorExtender2_ajaxFileUpload_UploadOrCancelButton" 
                    class="ajax__fileupload_uploadbutton" style="display: none; visibility: hidden;">
                    Upload
                </div>
            </div>
        </div>
    </div>
    <div id="ctl00_SampleContent_htmlEditorExtender2_btnCancel" 
        style="float: right; position:relative; padding-left: 20px; top:10px; width: 55px; border-color:black;border-style: solid; border-width: 1px;cursor:pointer;" 
        float="right" unselectable="on">
        Cancel
    </div>
</div>

Ajax Control Toolkit图像上传

1 个答案: