如何獲得與多文件上傳在asp.net VB

Question

您好我想與多個顯示彈出窗口彈出窗口fileupload

當我點擊UploadDocument button我都試過，但我不力得到正確的一個它旁邊顯示，以Upload Document button但我想獲得當我點擊UploadDocument button請幫我做到這一點。

<form action="" method="post" enctype="multipart/form-data" name="form" id="form1"> 
<asp:Button ID="btnUpload" runat="server" Text="Upload Document" /> 
<label> 
    upload file 
    <input type="file" multiple="true" /> 
</label> 
<label> 
    <input type="submit" name="button" id="button" value="Submit" /> 
</label> 
</form> 

在此先感謝！

Answer 1

對於您的要求，我已經創建使用Modal Popup

看看下面

$(function() { 
 
      modalPosition(); 
 
      $(window).resize(function() { 
 
       modalPosition(); 
 
      }); 
 
      $('.openModal').click(function (e) { 
 
       $('.modal, .modal-backdrop').fadeIn('fast'); 
 
       e.preventDefault(); 
 
      }); 
 
      $('.close-modal').click(function (e) { 
 
       $('.modal, .modal-backdrop').fadeOut('fast'); 
 
      }); 
 
     }); 
 
     function modalPosition() { 
 
      var width = $('.modal').width(); 
 
      var pageWidth = $(window).width(); 
 
      var x = (pageWidth/2) - (width/2); 
 
      $('.modal').css({ left: x + "px" }); 
 
     }

.modal-backdrop 
 
     { 
 
      background-color: rgba(0, 0, 0, 0.61); 
 
      position: absolute; 
 
      top: 0; 
 
      bottom: 0; 
 
      left: 0; 
 
      right: 0; 
 
      display: none; 
 
     } 
 
     .modal 
 
     { 
 
      width: 500px; 
 
      position: absolute; 
 
      top: 25%; 
 
      z-index: 1020; 
 
      background-color: #FFF; 
 
      border-radius: 6px; 
 
      display: none; 
 
     } 
 
     .modal-header 
 
     { 
 
      background-color: #333; 
 
      color: #FFF; 
 
      border-top-right-radius: 5px; 
 
      border-top-left-radius: 5px; 
 
     } 
 
     .modal-header h3 
 
     { 
 
      margin: 0; 
 
      padding: 0 10px 0 10px; 
 
      line-height: 40px; 
 
     } 
 
     .modal-header h3 .close-modal 
 
     { 
 
      float: right; 
 
      text-decoration: none; 
 
      color: #FFF; 
 
     } 
 
     .modal-footer 
 
     { 
 
      background-color: #F1F1F1; 
 
      padding: 0 10px 0 10px; 
 
      line-height: 40px; 
 
      text-align: right; 
 
      border-bottom-right-radius: 5px; 
 
      border-bottom-left-radius: 5px; 
 
      border-top: solid 1px #CCC; 
 
     } 
 
     .modal-body 
 
     { 
 
      padding: 0 10px 0 10px; 
 
     }

<asp:Button ID="btn_open" runat="server" Text="Open Modal" CssClass="openModal" /> 
 
    <div class="modal"> 
 
     <div class="modal-header"> 
 
      <h3> 
 
       File Upload <a class="close-modal" href="#">&times;</a></h3> 
 
     </div> 
 
     <div class="modal-body"> 
 
      <p> 
 
       <asp:FileUpload ID="FileUpload1" runat="server" AllowMultiple="true" /> 
 
     </div> 
 
     <div class="modal-footer"> 
 
      <asp:Button ID="btn_close" runat="server" Text="Upload Document" CssClass="modalOK close-modal" /> 
 
     </div> 
 
    </div> 
 
    <div class="modal-backdrop"> 
 
    </div>

看看

不要忘記添加Jquery Plugin

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 

讓演示我知道你是否有任何疑問。

希望幫助你

看一看下面的截圖