asp:FileUpload 控件在使用假输入时未获取文件值

Posted 2023-03-05

【中文标题】asp:FileUpload 控件在使用假输入时未获取文件值

【英文标题】：asp:FileUpload control not getting file value when using fake input

【发布时间】：2015-04-04 20:37:14

【问题描述】：

我尝试使用一些 css 技巧来自定义我的 asp:FileUpload 控件。最后上传图片的时候，好像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 中从来没有文件。我应该在哪里改变它？谢谢大家。

【参考方案1】：

没有什么会立即跳出来给我。我建议：

首先，注释掉你的 JavaScript。当您不先修改底层 html 标记时，FileUpload 控件是否工作？如果是这样，请仔细查看 JavaScript 中的这两行：

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

也许罪魁祸首在于试图在标记中隐藏该值。

【讨论】：

2 件事。首先，良好的观察，一个简单的上传控件不起作用。我的<form/> 标签中没有enctype="multipart/form-data"。其次，我注释了这两行，我只是离开了var fileInput = $('#<%=fuPicture.ClientID%>')，以便知道fileInput。我可以上传我的文件。所以我只需要在我的 css 上做一些工作来隐藏真正的上传控件。即使您没有提及enctype="multipart/form-data"，我也会检查您的答案，我需要您的评论。谢谢