asp: FileUpload control не получает значение файла при использовании поддельного ввода

Question

Я пытаюсь настроить мой asp: FileUpload с помощью некоторого трюка css. Когда я наконец загружу изображение, кажется, что asp: FileUpload не захватил файл.

На странице ASPX:

<style> 
    #file { 
     display:none; 
    } 
</style> 

        <div> 
         <div style="float:left;"> 
          <asp:Button ID="btnSelectPicture" runat="server" CssClass="btn2small" Text="Select Picture" OnClientClick="javascript:return false;" /> 
         </div> 
         <asp:FileUpload ID="fuPicture" runat="server" /> 
         <div id="inputUploadFileName" style="float:left; line-height: 2; margin: 0 15px;">No picture selected</div> 
         <div style="float:left;"> 
          <asp:Button ID="btnUploadPicture" runat="server" Text="Upload" CssClass="btn2small" OnClick="btnUploadPicture_Click" ValidationGroup="vgUploadp"/> 
         </div> 
         <div id="errorFormatPicture" class="errorMessage" style="float:left; line-height:2; margin-left: 15px;"></div> 
        </div>   

<script> 
    var wrapper = $('#<%=fuPicture.ClientID%>').css({ height: 0, width: 0, 'overflow': 'hidden' }); 
    var fileInput = $('#<%=fuPicture.ClientID%>').wrap(wrapper); 

    fileInput.change(function() { 
     $this = $(this); 
     var fileName = $this.val(); 
     fileName = fileName.substring(fileName.lastIndexOf('\\') + 1, fileName.length); 
     if (fileName.length == 0) 
      fileName = "No picture selected"; 
     else { 
      extension = fileName.substring(fileName.lastIndexOf('.') + 1, fileName.length); 
      if (extension != "jpg" && extension != "png") 
       $("#errorFormatPicture").text(" * png or jpg only"); 
      else { 
       $("#errorFormatPicture").text(""); 
       $('#inputUploadFileName').text(fileName); 
      } 
     } 
    }) 

    $('#<%=btnSelectPicture.ClientID%>').click(function() { 
     fileInput.click(); 
     return false; 
    }).show(); 
</script> 

Затем на странице aspx.cs:

protected void btnUploadPicture_Click(object sender, EventArgs e) 
{ 
    Response.Write("has file? " + fuPicture.HasFile + "<BR>"); 


    if (fuPicture.HasFile) 
    { 
     try 
     { 
      if (fuPicture.PostedFile.ContentType == "image/jpeg" || fuPicture.PostedFile.ContentType == "image/png") 
      { 
       if (fuPicture.PostedFile.ContentLength < 500000) 
       { 
        string fileDirectory = string.Format("/images/upload/ServiceRequest/{0}/temp_request/", UserId); 
        System.IO.Directory.CreateDirectory(fileDirectory); 
        string fileName = Path.GetFileName(fuPicture.FileName); 
        string _fullFile = fileDirectory + fileName; 

        fuPicture.SaveAs(_fullFile); 
        lbErrorUploadPicture.Text = "uploaded"; 

        //Loadthumbnail(); 
       } 
       else 
        lbErrorUploadPicture.Text = "Pictures must be less than 500 kb"; 
      } 
      else 
       lbErrorUploadPicture.Text = "Pictures must be jpeg or png format"; 
     } 
     catch (Exception ex) 
     { 
      lbErrorUploadPicture.Text = "Unexpected error: Pictures could not be uploaded. "; 
     } 
    } 
} 

FileUpload не имеет файл в нем. Где я должен его изменить? Спасибо вам всем.

Answer 1

Ничто не подскакивает мне немедленно. Я бы предложил:

Во-первых, закомментируйте свой JavaScript. Работает ли элемент управления FileUpload, если вы сначала не изменяете базовую HTML-разметку? Если да, то более близкий взгляд на эти 2 строки в JavaScript:

var wrapper = $('#<%=fuPicture.ClientID%>').css({ height: 0, width: 0, 'overflow': 'hidden' }); 
var fileInput = $('#<%=fuPicture.ClientID%>').wrap(wrapper); 

Возможно, преступник находится в попытке скрыть это значение в разметке.