採用asp上傳一個文件的jQuery或JavaScript

Question

FileUpload控件在Web窗體我想用ASP上傳文件：FileUpload控件，

所以，當我點擊的Asp：按鈕;應該發生FileUpload點擊並且OpenFileDialog應該打開。

FilePathBrowser.ascx

<script type="text/javascript" src = "../Scripts/jquery-1.2.6.js"> 
$(document).ready(function() { 
    $(document).on('change', '#<%= fUpload.ClientID %>', function() { 
     if (document.getElementById('<%= fUpload.ClientID %>').files.length === 0) { 
      return; 
     } 
     $('#<%= btnText.ClientID %>').trigger('click'); 
    }); 
}); 
</script> 


    <table width="100%"> 
    <tr> 
    <td style="width:80%;"><asp:TextBox ID="txtFilePath" runat="server" CssClass="FlatTextbox" Width="100%" ReadOnly="true" ></asp:TextBox></td> 
    <td style="width:10%; padding-left:15px"><asp:Button ID="btnText" runat="server" Text="" CssClass="FlatButton" Width="100%" onclick="btnText_Click" /></td> 
    <td style="width:10%"><asp:FileUpload ID="fUpload" runat="server" Visible="false" OnClick="DoOpenFileDialog()"/></td> 
    </tr> 
    </table> 

FilePathBrowser.ascx.cs

public partial class FilePathBrowser : System.Web.UI.UserControl 
    { 
     public event EventHandler BrowseClick; 

     public string FilePathText 
     { 
      get { return txtFilePath.Text; } 
      set { txtFilePath.Text = value; } 
     } 

     public string ButtonText 
     { 
      get { return btnText.Text; } 
      set { btnText.Text = value; } 
     } 

     public FileUpload HiddenFileUploadCtrl 
     { 
      get { return this.fUpload; } 
      set { fUpload = value; } 
     } 

     protected void Page_Load(object sender, EventArgs e) 
     { 

     } 

     protected void btnText_Click(object sender, EventArgs e) 
     { 
      BrowseClick(sender, e); 
     } 
    } 

在網頁Menu.aspx

<UserControl:FPBrowser ID = "fpbImageUpload" runat = "server" ButtonText="Browse.." FilePathText="" OnBrowseClick="fpbImageUpload_BrowseClick"/> 

Menu.aspx.cs

protected void fpbImageUpload_BrowseClick(object sender, EventArgs e) 
    { 
     if (fpbImageUpload.HiddenFileUploadCtrl.HasFile) 
     { 
      String fileName = fpbImageUpload.HiddenFileUploadCtrl.FileName; 
      fpbImageUpload.FilePathText = Path.Combine(Helper.FileUploadPath, fileName); 
      fpbImageUpload.HiddenFileUploadCtrl.SaveAs(Path.Combine(Helper.FileUploadPath, fileName)); 
     } 
    } 

所以對話框沒有打開。有沒有人知道我在代碼中缺少什麼？

Answer 1

添加此javascript函數用戶控件

function hookFileClick() { 
    // Initiate the File Upload Click Event 
    document.getElementById('<%=fUpload.ClientID%>').click(); 
} 

function callme(oFile) { 
    document.getElementById('<%=txtFilePath.ClientID%>').value = oFile.value; 
} 

用戶Control.ascx

<table width="100%"> 
    <tr> 
    <td style="width:70%;"><input ID="txtFilePath" runat="server" type="text" class="FlatTextbox" style= "width:100%;" /></td> 
    <td style="width:29%; padding-left:15px"><asp:Button ID="btnText" runat="server" Text="" CssClass="FlatButton" Width="100%" OnClick="btnText_Click" OnClientClick="javascript:return hookFileClick();" /></td> 
    <td style="width:1%"><asp:FileUpload ID="fUpload" runat="server" Style="visibility: hidden;width:1px" onchange="callme(this)"/></td> 
    </tr> 
    </table> 

修改代碼在Menu.aspx.cs文件

protected void fpbImageUpload_BrowseClick(object sender, EventArgs e) 
    { 
     if (fpbImageUpload.HiddenFileUploadCtrl.HasFile) 
     { 
      String fileName = fpbImageUpload.HiddenFileUploadCtrl.FileName; 
      //fpbImageUpload.FilePathText = Path.Combine(Helper.FileUploadPath, fileName); 
      fpbImageUpload.HiddenFileUploadCtrl.SaveAs(Path.Combine(Helper.FileUploadPath, fileName)); 
     } 
    }