Ajax控件工具包圖片上傳

Question

我想知道是否可以自定義自帶的.NET 4.0 Ajax的HTML編輯器，圖像上傳按鈕圖像上傳屏幕的設計。如果有可能有人有任何鏈接或例子？

Answer 1

因此...... AJAX Control Toolkit的「插入圖像」功能創建了一個可怕的怪異的div和span，並帶有各種內聯樣式和嚴重長ID /名稱屬性（我將在最後這個答案，供參考）。

不過，也有一些類就可以定位到圖像上載彈出窗口的風格特定組件。當你點擊「所顯示的圖像上載彈出的最外層容器選擇 -

• .popupDiv：因爲似乎沒有成爲該子組件的任何文件，我應該記錄下面這些CSS類插入圖片」按鈕
• .ajax__fileupload - 選擇外側容器DIV的文件上傳區
• .ajax__fileupload_dropzone - 選擇的‘拖放’文件上傳區域。這隻會出現在支持此功能的瀏覽器中。
• .ajax__fileupload_selectFileContainer - 圍繞傳統文件上傳區域的容器選擇器（點擊查看windows文件選擇對話框）。
• .ajax__fileupload_selectFileButton - 選擇周邊的「選擇文件」
• .ajax__fileupload_topFileStatus跨度 - 選擇周圍的容器「請選擇文件（S）上傳區（以右側的‘選擇文件’）
• .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 f或彈出式，帶有醜陋的內聯樣式/ 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>